คุณสมบัติ CSS ที่น่าสนใจที่คุณควรรู้

สัปดาห์ที่แล้วเรากำลังพูดถึงองค์ประกอบหลอกและคลาสหลอกใน CSS ในโพสต์นั้น เราเห็นว่าฟีเจอร์ CSS เหล่านี้ช่วยให้เราสร้างโค้ดที่กระชับ เข้าใจได้ และง่ายต่อการบำรุงรักษามากขึ้นได้อย่างไร วันนี้ฉันอยากจะแบ่งปันกับคุณ คุณสมบัติ CSS เพิ่มเติม เพื่อสร้างเว็บไซต์ที่ปรับเปลี่ยนได้ซึ่งคำนึงถึงการ ตั้งค่าของผู้เยี่ยมชมของคุณ

อัตราส่วนภาพกับ object-fit และ object-position

object-fit เป็นคุณสมบัติ CSS ที่ให้คุณกำหนดวิธีการปรับขนาดองค์ประกอบทดแทน (เช่น รูปภาพ) เพื่อให้พอดีกับคอนเทนเนอร์ ลองดูว่ามันหมายความว่าอย่างไรด้วยตัวอย่างที่เป็นรูปธรรมใช่ไหม

สมมติว่าเรามีภาพแนวตั้งดังต่อไปนี้:

และเราต้องการแสดงในพื้นที่ต่อไปนี้:

ซึ่งสูง 15em และใช้ 80% ของความกว้างที่มีอยู่ โดยหลักการแล้ว คุณอาจคิดว่าทั้งหมดที่เราต้องทำคือกำหนด width และ height เฉพาะให้กับภาพของเราใช่ไหม

 .custom-size { height: 15em; width: 80%; }

หากคุณทำเช่นนั้น คุณจะเห็นว่าอัตราส่วนกว้างยาวของภาพยุ่งเหยิงไปหมด:

เพื่อป้องกันไม่ให้รูปภาพบิดเบี้ยวเมื่อใช้ความกว้างและความสูงเฉพาะ นักพัฒนาจึงเคยใช้ (และบางคนยังคงใช้) คุณสมบัติ background CSS ของ div ดังนั้น แทนที่จะเพิ่มรูปภาพโดยใช้แท็ก img เราเคยสร้างคอนเทนเนอร์ div :

 <div></div>

กำหนดขนาดที่ถูกต้องเป็น div ดังกล่าวแล้วเพิ่มรูปภาพจริงผ่าน CSS โดยใช้คุณสมบัติ background-size พื้นหลังและ background-position :

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

และที่นี่คุณสามารถเห็นผล:

การปรับขนาดและครอบตัดรูปภาพโดยใช้คุณสมบัติ background CSS บนแท็ก div เป็นวิธีแก้ปัญหาที่ไม่ดี เนื่องจากคุณไม่ได้ใช้แท็ก HTML ที่ถูกต้องตามความหมายอีกต่อไป: img นอกจากนี้ แท็ก img ยังมีคุณสมบัติเจ๋ง ๆ มากมายที่จะส่งผลให้เว็บไซต์เร็วขึ้นและเข้าถึงได้มากขึ้น: คุณสมบัติ alt ที่อธิบายรูปภาพ, srcset เพื่อให้ตอบสนอง, loading เพื่อโหลดแบบ Lazy Loading เป็นต้น

หากคุณต้องการปรับขนาดและครอบตัดรูปภาพเพื่อให้พอดีกับขนาดบางอย่างโดยไม่ทำให้รูปภาพบิดเบี้ยว สิ่งที่คุณต้องทำคือใช้คุณสมบัติ CSS ของ object-fit และ object-position ซึ่งทำหน้าที่เป็น background-size พื้นหลังและ background-position ทำ:

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

หากคุณใช้กฎก่อนหน้านี้กับแท็ก img :

 <img class="custom-size" src="…/image.jpg" />

นี่คือผลลัพธ์ที่คุณได้รับ:

ซึ่งเป็นสิ่งที่คุณสนใจใช่หรือไม่

หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับคุณสมบัตินี้ นี่คือลิงค์พร้อมข้อมูลที่จำเป็นทั้งหมด

การออกแบบที่ปรับเปลี่ยนได้ด้วยการสืบค้นสื่อ

ข้อความค้นหาสื่อเป็นกลไกที่ช่วยให้คุณสามารถเพิ่มกฎ CSS ลงในเว็บไซต์ของคุณตามลักษณะของอุปกรณ์หรือแอปพลิเคชันที่ผู้เยี่ยมชมของคุณเข้าถึงเว็บ ฉันค่อนข้างแน่ใจว่าคุณค่อนข้างคุ้นเคยกับพวกเขา เนื่องจากการสืบค้นสื่อเป็นพื้นฐานสำหรับการสร้างเว็บไซต์ที่ตอบสนองตามอุปกรณ์ แต่ยังมีอีกมากที่คุณสามารถทำได้กับพวกเขา!

แบบสอบถามสื่อคลาสสิก

การใช้คิวรีสื่อในสไตล์ชีต CSS นั้นง่ายพอๆ กับการเพิ่มคีย์เวิร์ด @media ด้วยสองสิ่ง: ด้านหนึ่ง เงื่อนไขที่อธิบายเมื่อคิวรีสื่อทำงานอยู่ และในทางกลับกัน ชุดของกฎ CSS ที่ควร โหลดเมื่อตรงตามเงื่อนไข นั่นเป็นสาเหตุที่การสืบค้นสื่อเป็นพื้นฐานสำหรับการสร้างการออกแบบที่ตอบสนอง: คุณเพียงแค่ใช้กฎชุดใดชุดหนึ่งหรือชุดอื่นขึ้นอยู่กับ width ของเบราว์เซอร์ของผู้เยี่ยมชม

ตัวอย่างเช่น สมมติว่าคุณต้องการเปลี่ยนแถบด้านข้างของย่อหน้าต่อไปนี้:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ สิงโตบนระเบียงอ่อนน่าเกลียดบางครั้ง แต่องค์ประกอบภายนอกสั่น แต่ความต้องการผู้ประกอบการที่เรียกว่าความเครียดจากความร้อน ไมโครเวฟสำรอง แต่ประตูของฉันอยู่เสมอหรือบางครั้งผู้เขียนจำนวนมาก Android และ Nunc sodales interdum, tincidunt erat ac, tincidunt elit อย่างไรก็ตาม ultricies ac, arcu metus Sed congue. เพื่อความสะดวกกลัวลีโอเพิ่มโปรตีน เป็น Tellus orci, tempor id egestas nec อย่างน้อยก็มีผู้เล่นบางคน

เพื่อให้มันใช้สีทั้งหมดในรุ้งขึ้นอยู่กับความกว้างของเบราว์เซอร์ นี่คือวิธีที่คุณสามารถบรรลุพฤติกรรมนี้ผ่าน CSS:

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

ค่อนข้างง่ายใช่มั้ย เราเพียงแค่ต้องใช้สีที่ต่างกันทุกครั้งที่ความกว้างของเบราว์เซอร์เกินเกณฑ์ที่กำหนด โปรดทราบว่าเราใช้สิ่งนี้โดยใช้แนวทางแรกสำหรับอุปกรณ์เคลื่อนที่ เนื่องจากมีการนำกฎ "ใหม่" ไปใช้เมื่อหน้าจอใหญ่ขึ้น เปลี่ยนความกว้างของหน้าต่างแล้วคุณจะเห็นผลลัพธ์

วิธีใช้งานโหมดมืดด้วย CSS

โหมดมืดกำลังเป็นที่นิยมทั้งบนมือถือและเดสก์ท็อป คุณรู้หรือไม่ว่ามีการสืบค้นสื่อเพื่อดูว่าผู้ใช้ชอบโหมดมืดหรือไม่? การใช้คิวรีสื่อ prefers-color-scheme คุณสามารถดูได้ว่าผู้ใช้ชอบแบบแผนสี light หรือ dark ซึ่งหมายความว่าขณะนี้คุณมีอำนาจในการสร้างเว็บไซต์สองเวอร์ชันเพื่อให้ตรงกับความต้องการของผู้เยี่ยมชมทั้งหมดของคุณ

ตัวอย่างเช่น พิจารณาตัวอย่าง HTML ต่อไปนี้:

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

และกฎ CSS เหล่านี้:

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

ขึ้นอยู่กับการตั้งค่าของคุณ คุณจะเห็นว่าส่วน "ไดนามิก" ของข้อมูลโค้ด HTML ก่อนหน้านั้นดูเหมือนธีม Light หรือธีมสีเข้ม:

เจ๋งมากใช่มั้ย? และเรียบง่าย!

กรณีการใช้งานที่น่าสนใจอื่น ๆ พร้อมแบบสอบถามสื่อ

มีข้อความค้นหาสื่อมากมายที่คุณสามารถใช้ได้ (คุณมีรายการทั้งหมดที่นี่) แต่ฉันต้องการเน้นที่คำถามโดยเฉพาะ โดยเฉพาะอย่างยิ่ง ฉันต้องการอธิบายให้คุณทราบถึงวิธีการใช้สไตล์ที่แตกต่างกัน ขึ้นอยู่กับว่าหน้านั้นแสดงในเบราว์เซอร์หรือกำลังจะพิมพ์ สิ่งที่คุณต้องทำคือใช้คีย์เวิร์ดการ print หรือ screen ในการสืบค้นสื่อดังต่อไปนี้:

 @media print { … } @media screen { … }

หรือสร้างไฟล์ CSS แยกกันสองไฟล์ ไฟล์หนึ่งไฟล์สำหรับแต่ละกรณีการใช้งาน และรวมไว้ใน HTML ของคุณโดยใช้คุณสมบัติ media ของแท็ก link :

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

สิ่งที่น่าสนใจเกี่ยวกับเรื่องนี้คือ คุณสามารถสร้างสไตล์ชีตที่เปลี่ยนไซต์ของคุณให้เป็นเนื้อหาที่ออกแบบมาเพื่อให้พิมพ์ได้ ตัวอย่างเช่น คุณจะสามารถซ่อนส่วนไดนามิกของเว็บที่ไม่สมเหตุสมผลในฉบับพิมพ์ (เช่น เมนูหรือแบบฟอร์ม) คุณยังสามารถทำให้มองเห็นบางสิ่งที่สูญหายเมื่อพิมพ์ออกมาได้ เช่น URL เป้าหมายของลิงก์:

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

ซึ่งได้ผลดังนี้

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ Vestibulum mollis leo ใน turpis interdum ที่ pharetra velit elementum น้ำ eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper ผู้ประมูล vel interdum massa Pellentesque et massa congue, ปกติแล้ว erat ac, tincidunt elit เซ็ด แอค โดลอร์ เมตุส Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

ตัวแปร CSS

สุดท้ายนี้ เรามาพูดถึงคุณสมบัติ CSS ที่น่าทึ่งอีกอย่างหนึ่งกันดีกว่า: คุณสมบัติที่กำหนดเองของ CSS (หรือที่เรียกว่าตัวแปร CSS) เว็บไซต์ที่ซับซ้อนมี CSS จำนวนมาก และเป็นเรื่องปกติที่จะมีค่าเดียวกันซ้ำแล้วซ้ำอีก ตัวอย่างเช่น จานสี เส้นขอบ ช่องว่างภายใน และอื่นๆ ของคุณถูกใช้ทั่วทุกที่ ตัวแปร CSS ช่วยลดความซับซ้อนนี้ และมีประโยชน์อย่างยิ่งในการปรับใช้โหมดมืดอย่างง่ายดาย!

ตัวแปร CSS เป็นสิ่งที่คุณคิดอย่างแท้จริง นั่นคือวิธีจัดเก็บและนำค่า CSS เฉพาะมาใช้ซ้ำหลังชื่อที่มีความหมาย ง่ายกว่าที่จะเข้าใจว่า --main-text-color คืออะไรมากกว่า #333 ใช่ไหม

การประกาศคุณสมบัติแบบกำหนดเองทำได้โดยใช้ชื่อคุณสมบัติแบบกำหนดเองที่ขึ้นต้นด้วยยัติภังค์คู่ ( -- ) และค่าคุณสมบัติที่สามารถเป็นค่า CSS ที่ถูกต้องใดๆ เช่นเดียวกับคุณสมบัติอื่น ๆ สิ่งนี้เขียนในชุดกฎเช่น:

 element { --main-color: red; --main-padding: 2em 1em; }

ตัวเลือกที่คุณใช้ในบล็อกกฎที่คุณกำหนดตัวแปร CSS จะกำหนดขอบเขต นั่นคือ หากคุณกำหนดตัวแปรภายในกฎ div.banner ตัวแปรนั้นจะใช้ได้เฉพาะในขอบเขตนั้นเท่านั้น อย่างไรก็ตาม ที่พบบ่อยที่สุดคือการสร้างตัวแปรในขอบเขตส่วนกลางโดยใช้คลาสหลอก :root :

 :root { --main-color: red; --main-padding: 2em 1em; }

ในการใช้ตัวแปร CSS คุณเพียงแค่ระบุชื่อภายในฟังก์ชัน var :

 p { color: var(--main-color); padding: var(--main-padding); }

CSS อยู่ที่นี่เพื่อช่วยคุณ

โครงสร้าง HTML ของหน้าเว็บเปรียบเสมือนรากฐานของบ้าน – คุณต้องมีรากฐานที่มั่นคงหากต้องการสร้างบางสิ่งที่ดูดี เมื่อสร้างหน้าเว็บ ตรวจสอบให้แน่ใจว่าคุณใช้แผนผัง HTML ที่ถูกต้องและสะอาดตามความหมาย ซึ่งจะส่งผลให้หน้าที่จะทำงานกับทุกเบราว์เซอร์สำหรับผู้เยี่ยมชมทั้งหมด และการใช้เทคนิค CSS ด้านบนจะง่ายและมีประสิทธิภาพ

ฉันหวังว่าคุณจะชอบโพสต์ของวันนี้ ถ้าคุณเคย แบ่งปันกับเพื่อนของคุณ

ภาพเด่นโดย William Daigneault บน Unsplash