5 คุณสมบัติ CSS ใหม่สุดฮอตและวิธีใช้

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

สำหรับการกวดวิชานี้คุณจะต้องมี Chrome 65+ หรือ Firefox 59+ ดู มาพร้อมกับ GitHub Repo สำหรับรหัสทีละขั้นตอน เราจะใช้ประโยชน์จากคุณสมบัติต่อไปนี้เพื่อสร้างประสบการณ์ที่ดีขึ้นและแก้ไขปัญหาบางประเด็น และถ้าคุณออกแบบควบคู่ไปกับทีมให้ใช้ประโยชน์สูงสุด การจัดเก็บเมฆ เพื่อรักษาสิ่งที่เหนียวแน่น

โมดูลการแสดงผล CSS (ระดับ 3)

• จอแสดงผล: เนื้อหา;
• สถานะ W3C - ร่างการทำงาน
• รองรับเบราว์เซอร์

โมดูลกฎ CSS ตามเงื่อนไข (ระดับ 3)

• @support (... ) {... }
• สถานะ W3C - คำแนะนำผู้สมัคร
• อ่านเพิ่มเติม: MDN Web Docs

โมดูลพฤติกรรม Overscroll CSS (ระดับ 1)

• พฤติกรรม overscroll: มี;
• สถานะ W3C - ไม่เป็นทางการ
• รองรับเบราว์เซอร์
• อ่านเพิ่มเติม: ควบคุมการเลื่อนของคุณ

โมดูลตัวเลือก CSS (ระดับ 4)

• : โฟกัสภายใน
• สถานะ W3C - ร่างการทำงาน
• รองรับเบราว์เซอร์
• อ่านเพิ่มเติม: MDN Web Docs : โฟกัสภายใน , : ตัวยึดตำแหน่งที่แสดง

โมดูลการบรรจุ CSS (ระดับ 1)

• บรรจุ: สี;
• สถานะ W3C - คำแนะนำผู้สมัคร
• รองรับเบราว์เซอร์
• อ่านเพิ่มเติม: การบรรจุ CSS ใน Chrome 52

01. ตั้งค่า HTML สำหรับ NewsFeed

ก่อนอื่นเราต้องตั้งค่าให้ง่ายสุด ๆ มาร์กอัปทำซ้ำสำหรับ NewsFeed ของเรา มาสร้าง .container DIV กับรายการที่ไม่เรียงลำดับภายใน ให้ & lt; ul & gt; ชั้นของ .Feed จากนั้นสร้างรายการ 10 รายการแต่ละรายการที่มี div กับ .Card ชั้นเรียนและบัตรข้อความ 1 การ์ด 2 ฯลฯ

ในที่สุดก็สร้างอีก รายการรายการ ในระหว่าง 5 ถึง 6 กับคลาสของ .nested - สิ่งนี้จะเป็นประโยชน์ในภายหลัง - และเพิ่ม & lt; ul & gt; ภายในมีรายการสามรายการโดยใช้การ์ดข้อความ A, การ์ด B ฯลฯ

 & lt; ร่างกาย & gt;
 & lt; div class = "คอนเทนเนอร์" & gt;
 & lt; ul class = "ฟีด" & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; บัตร 1 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; บัตร 2 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; การ์ด 3 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; การ์ด 4 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; การ์ด 5 & lt; / div & gt; & lt; / li & gt;
    & lt; li class = "ซ้อนกัน" & gt;
 & lt; ul & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; การ์ด A & Lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; card b & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; card c & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / li & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; การ์ด 6 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; การ์ด 7 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; บัตร 8 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; บัตร 9 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "การ์ด" & gt; การ์ด 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
& lt; / div & gt;
& lt; / body & gt; 

02. สไตล์ NewsFeed

ตอนนี้เราจำเป็นต้องเพิ่มสไตล์ที่รวดเร็วเพื่อให้สิ่งนี้เริ่มดูคล้ายกับ Newsfeed มากขึ้น ก่อนอื่นเราสามารถให้ & lt; ร่างกาย & gt; สีพื้นหลังสีเทาที่ละเอียดอ่อน ให้ .container ความกว้างสูงสุด 800px และใช้งาน ระยะขอบ: 0 อัตโนมัติ; ไปที่ศูนย์จัดตำแหน่ง

เรายังให้ .Card พื้นหลังสีขาว, 10px ของ padding และ margin และในที่สุด ความสูง 300px - สิ่งนี้ควรให้เราเพียงพอที่จะทำให้หน้าเลื่อนได้ สุดท้ายเราจะโรยความมหัศจรรย์ Flexbox บางอย่างบน .Feed เพื่อให้รายการไหลอย่างดีพร้อมการ์ดสองใบต่อแถว

 .Feed {
จอแสดงผล: Flex;
Flex-wrap: ห่อ;
}
.Feed Li {
Flex: 1 0 50%;
} 

03. แก้ไขปัญหาเค้าโครง

หากคุณเลื่อนรายการคุณจะสังเกตเห็นว่าการ์ดของเราในรายการที่ซ้อนกันการ์ด A - C ทำให้เกิดปัญหาบางเค้าโครง เป็นการดีที่เราต้องการให้พวกเขาไหลเข้ากับส่วนที่เหลือของไพ่ แต่พวกเขาทั้งหมดติดอยู่ด้วยกันในหนึ่งช่วงตึก เหตุผลนี้คือคอนเทนเนอร์แบบยืดหยุ่น - ซึ่งสร้างขึ้นโดยใช้ จอแสดงผล: Flex - ทำให้เด็ก ๆ ได้ทันที (I.e. รายการรายการ) เป็นรายการแบบยืดหยุ่น

ตอนนี้โดยปกติวิธีการแก้ไขนี้คือการเปลี่ยนมาร์กอัป แต่ลองแกล้งทำเป็นว่าคุณไม่มีความหรูหรานั้น บางที Markup NewsFeed จะถูกสร้างขึ้นโดยสคริปต์ของบุคคลที่สามหรือเป็นรหัสดั้งเดิมที่คุณพยายามที่จะแก้ปัญหา ดังนั้นเราจะแก้ไขได้อย่างไร

พบกัน แสดง: เนื้อหา . Linter เล็ก ๆ น้อย ๆ นี้ทำให้องค์ประกอบทำงานราวกับว่ามันไม่ได้อยู่ที่นั่น คุณยังเห็นลูกหลานขององค์ประกอบ แต่องค์ประกอบนั้นไม่ส่งผลกระทบต่อเค้าโครง

เพราะเราแสร้งทำเป็นว่าเราไม่สามารถเปลี่ยนมาร์กอัป (เพียงแค่ขั้นตอนนี้) เราสามารถเป็นสมาร์ทเกี่ยวกับเรื่องนี้เล็กน้อยและทำให้ .Card องค์ประกอบรายการแบบ Flex และเกือบจะเพิกเฉยต่อมาร์เก็ตรายการ

ก่อนอื่นให้ลบที่มีอยู่ .Feed Li ชั้นเรียนแล้วใช้ แสดง: เนื้อหา สำหรับทั้ง & lt; ul & gt; และ & lt; li & gt; องค์ประกอบ:

 .Feed ul,
.Feed Li {
จอแสดงผล: เนื้อหา;
} 

ตอนนี้คุณควรเห็นไพ่ไหลในการสั่งซื้อ แต่เราได้สูญเสียการปรับขนาด แก้ไขว่าโดยการเพิ่มคุณสมบัติแบบยืดหยุ่นให้กับ .Card แทน:

 .card {
Flex: 1 0 40%;
} 

ตา - ดา บัตรของเราตอนนี้ใช้สิ่งมหัศจรรย์ของ Flexbox ราวกับว่าไม่มีการเรียงลำดับรายการที่ไม่ได้เรียงลำดับโครงสร้างของพวกเขา

ในฐานะที่เป็นหมายเหตุด้านข้างคุณอาจสงสัยว่าทำไม เก่ง ค่าถูกตั้งค่าเป็น 40% นี่เป็นเพราะ .Card ชั้นเรียนมีอัตรากำไรขั้นต้นซึ่งไม่รวมอยู่ในการคำนวณความกว้างตามที่คุณคาดหวังเมื่อใช้งาน การปรับขนาดกล่อง: กล่องแดน . เพื่อแก้ไขปัญหานี้เราแค่ต้องตั้งค่า เก่ง สูงพอที่จะกระตุ้นการห่อที่จุดที่จำเป็นและ Flexbox จะเติมพื้นที่ที่เหลือโดยอัตโนมัติ

04. สำรวจการสืบค้นคุณสมบัติ

แม้ว่า แสดง: เนื้อหา สิ่งที่เราต้องการ แต่ก็ยังคงอยู่ที่สถานะร่างที่ทำงานด้วย W3C เท่านั้น และในการสนับสนุน Chrome มาถึงในรุ่น 65 ที่เปิดตัวในเดือนมีนาคม 2018 Firefox อย่างไม่น่าเชื่อได้รับการสนับสนุนตั้งแต่เมษายน 2558!

หากคุณปิดการใช้งานสไตล์ใน DevTools คุณจะเห็นว่าการเปลี่ยนแปลงของเราทำให้ยุ่งเหยิงกับเค้าโครงเมื่อ แสดง: เนื้อหา ไม่ได้ใช้ แล้วเราจะทำอะไรได้บ้าง เวลาสำหรับคุณสมบัติใหม่ของเราต่อไป - แบบสอบถามคุณสมบัติ

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

 @supports (แสดงผล: เนื้อหา) {
.Feed ul,
.Feed Li {
  จอแสดงผล: เนื้อหา;
}
.Card {
  Flex: 1 0 40%;
}
} 

05. ใช้ 'ไม่' สำหรับผลลัพธ์ที่สะอาดกว่า

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

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

 @ สนับสนุนไม่ (แสดงผล: เนื้อหา) {
.Feed Li {
  Flex: 1 0 50%;
}
} 

ข้างใน ไม่ แบบสอบถามเราสามารถเพิ่มบางสไตล์เพื่อให้ .nested รายการโดยทั่วไปจะใช้สิ่งที่ได้รับการสืบทอดโดยใช้ แสดง: เนื้อหา .

 ฟีด li.nested {
Flex- พื้นฐาน: 100%;
}
.Feed li.nested ul {
 จอแสดงผล: Flex;
 Flex-wrap: ห่อ;
} 

06. นำมันไปอีกขั้นหนึ่ง

คุณสามารถเห็นศักยภาพของการสืบค้นคุณสมบัติ แต่สิ่งที่ยอดเยี่ยมจริงๆคือคุณสามารถรวมการแสดงออกโดยใช้ตัวดำเนินการสามตัวที่มีอยู่: และ , หรือ และ ไม่ . บางทีเราอาจตรวจสอบ จอแสดงผล: Flex สนับสนุนจากนั้นเพิ่มการเรียงลำดับแบบลอยตัว

เราจะไม่ทำเช่นนั้นที่นี่ แต่ถ้าเราเราจะแก้ไขข้อสอบฟีเจอร์สองครั้งก่อนเช่นนี้:

 @supports (แสดงผล: Flex) และ (แสดงผล: เนื้อหา) {
...
}
@ สนับสนุน (แสดงผล: Flex) และ (ไม่ (แสดงผล: เนื้อหา)) {
...
} 

เป็นโบนัสคุณสามารถทดสอบการสนับสนุนคุณสมบัติที่กำหนดเองเช่นนี้:

 @supports (--foo: green) {
...
} 

07. เพิ่มกล่องแชท

ตอนนี้เรามีหนังสือพิมพ์ที่สวยงามในสถานที่มาเพิ่มกล่องแชทเล็กน้อยที่จับจ้องไปที่ด้านล่างขวาของหน้าจอ เราจะต้องมีรายการข้อความและฟิลด์ข้อความสำหรับผู้ใช้ในการป้อนข้อความของพวกเขา เพิ่มบล็อกนี้หลังจากเปิด & lt; ร่างกาย & gt; แท็ก:

 & lt; div class = "แชท" & gt;
 & lt; div class = "ข้อความ" & gt;
 & lt; ul & gt;
& lt; li & gt; & lt; div class = "ข้อความ" & gt; ข้อความ 1 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "ข้อความ" & gt; ข้อความ 2 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "ข้อความ" & gt; ข้อความ 3 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "ข้อความ" & gt; ข้อความ 4 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "ข้อความ" & gt; ข้อความ 5 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "ข้อความ" & gt; ข้อความ 6 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "ข้อความ" & gt; ข้อความ 7 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "ข้อความ" & gt; ข้อความ 8 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "ข้อความ" & gt; ข้อความ 9 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "ข้อความ" & gt; ข้อความ 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / div & gt;
 & lt; input type = "ข้อความ" class = "อินพุต" & gt;
& lt; / div & gt; 

08. สไตล์กล่องแชท

ใช้เวลาในการเพิ่มสไตล์อย่างรวดเร็วดังนั้นจึงดูดีครึ่งหนึ่ง

 .Chat {
 พื้นหลัง: #fff;
 ชายแดน: 10px ของแข็ง # 000;
 ด้านล่าง: 0;
 ขนาดตัวอักษร: 10px;
 ตำแหน่ง: แก้ไข;
 ขวา: 0;
 ความกว้าง: 300px;
 z-index: 10;
}
.Messages {
 Border-Bottom: 5px Solid # 000;
 ล้น: อัตโนมัติ;
 padding: 10px;
 แม็กซ์สูง: 300px;
}
.Message {
 พื้นหลัง: # 000;
 เส้นขอบรัศมี: 5px;
 สี: #FFF;
 มาร์จิ้น: 0 20% 10px 0;
 padding: 10px;
}
.Messages Li: ลูกคนสุดท้าย. Message {
 ระยะขอบ - ล่าง: 0;
}
.input {
 ชายแดน: ไม่มี;
 จอแสดงผล: บล็อก;
 padding: 10px;
 ความกว้าง: 100%;
} 

09. เลื่อนการผูกมัด

หวังว่าตอนนี้คุณจะมีกล่องแชทเล็ก ๆ น้อย ๆ พร้อมรายการข้อความที่เลื่อนได้ที่นั่งอยู่ด้านบนของ NewsFeed ของคุณ ดี. แต่คุณสังเกตเห็นว่าเกิดอะไรขึ้นเมื่อคุณเลื่อนเข้าไปในพื้นที่ซ้อนกันและคุณถึงจุดสิ้นสุดของช่วงที่เลื่อนได้? ลองมัน. เลื่อนทุกทางไปยังจุดสิ้นสุดของข้อความและคุณจะเห็นหน้าตัวเองจะเริ่มเลื่อนแทน นี่เรียกว่าการผูกมัดเลื่อน

มันไม่ใช่เรื่องใหญ่ในตัวอย่างของเรา แต่ในบางกรณีอาจเป็นไปได้ เราต้องแก้ไขปัญหานี้มาก่อนเมื่อสร้างพื้นที่ที่เลื่อนได้ภายใน Modals หรือเมนูบริบท

การแก้ไขที่สกปรกคือการตั้งค่า & lt; ร่างกาย & gt; ถึง ล้น: ซ่อน แต่มีคุณสมบัติ CSS ใหม่ที่ดีและเป็นประกายที่แก้ไขทั้งหมดนี้และมันเป็นหนึ่งใน Liner ที่เรียบง่าย ทักทาย พฤติกรรม overscroll . มีสามค่าที่เป็นไปได้:

• อัตโนมัติ - ค่าเริ่มต้นซึ่งอนุญาตให้เลื่อนการผูกมัด
• มี - ปิดใช้งานการกรอกผูกมัด
• ไม่มี - ปิดใช้งานการกรอกการผูกมัดและเอฟเฟกต์ Overscroll อื่น ๆ (เช่น Rubberanding)

เราสามารถใช้ชวเลข พฤติกรรม overscroll หรือเราสามารถกำหนดเป้าหมายไปในทิศทางที่เฉพาะเจาะจงด้วย overscroll-behavior-x (หรือ - ใช่ . ลองเพิ่มให้กับเรา .Messages ชั้นเรียน:

 .Messages {
...
overscroll-bechnorm-y: มี;
... } 

ตอนนี้ลองเลื่อนอีกครั้งแล้วคุณจะเห็นว่าไม่มีผลต่อการเลื่อนของหน้าอีกต่อไปเมื่อคุณไปถึงจุดสิ้นสุดของเนื้อหา

คุณสมบัตินี้ยังมีประโยชน์มากหากคุณต้องการใช้คุณสมบัติแบบดึงเพื่อฟื้นฟูใน PWA ของคุณพูดเพื่อรีเฟรช NewsFeed เบราว์เซอร์บางตัวเช่น Chrome สำหรับ Android เพิ่มตัวเองโดยอัตโนมัติและจนถึงขณะนี้ไม่มีวิธีที่ง่ายในการปิดการใช้งานโดยไม่ต้องใช้ JS เพื่อยกเลิกกิจกรรมโดยใช้งานขนถ่ายที่ไม่มีประสิทธิภาพ

ตอนนี้คุณเพียงแค่ต้องเพิ่ม พฤติกรรม overscroll: มี เพื่อองค์ประกอบที่มีวิวพอร์ตที่มีอยู่อาจ & lt; ร่างกาย & gt; หรือ & lt; html & gt; .

เป็นที่น่าสังเกตว่าทรัพย์สินนี้ไม่ใช่มาตรฐาน W3C ซึ่งเป็นข้อเสนอของกลุ่มชุมชนศูนย์บ่มเพาะเว็บ (Wicg) ข้อเสนอ Wicg ที่เป็นที่นิยมและเป็นผู้ใหญ่ได้รับการพิจารณาสำหรับการโยกย้ายไปยังกลุ่มทำงาน W3C ในขั้นตอนต่อไป

10. ยุบกล่องแชทเมื่อไม่ใช้งาน

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

แต่ก่อนอื่นเราต้องปรับเปลี่ยนสไตล์ที่มีอยู่ของเราเล็กน้อย โดยค่าเริ่มต้นเราต้องการให้กล่องแชทที่จะยุบดังนั้นเราต้องลด ความสูงสูงสุด ค่าใน .Messages ชั้นเรียน ในขณะที่เราอยู่ที่นั่นเราสามารถเพิ่มการเปลี่ยนแปลงไปยัง ความสูงสูงสุด คุณสมบัติ:

 .Messages {
 ...
 แม็กซ์สูง: 25px;
การเปลี่ยนแปลง: สูงสุดความสูง 500ms; } 

หน้าถัดไป: สำรวจคุณสมบัติ CSS ใหม่ต่อไปในขั้นตอนที่ 11-20

• 1
• 2

หน้าปัจจุบัน: สำรวจ 5 คุณสมบัติ CSS ใหม่: ขั้นตอนที่ 01-10