สิ่งสำคัญ #18: ไวยากรณ์ ::highlight()ing, name-feature() และ Other | เคล็ดลับ CSS
นั่นคือห่อ ไม่ ไม่ flex-wrapแต่วันนี้เป็นวัน สัปดาห์ เดือน ฤดูใหม่ อ่าาา ฉบับใหม่ สิ่งที่สำคัญ (#18)นำเสนอเนื้อหาที่ดีที่สุดที่นักพัฒนา CSS สร้างขึ้นในช่วงสองสามสัปดาห์ที่ผ่านมา
Abhishek Jakhar อธิบายว่าทำไมคำแนะนำเครื่องมือจึงควรล่าช้าทันที (เพื่อที่เราจะได้ไม่เรียกใช้คำแนะนำโดยไม่ได้ตั้งใจแล้วหายไปทันทีเมื่อเราไม่ต้องการอีกต่อไป) อภิเษกแสดงให้เราเห็นว่าจะทำให้ทุกอย่างเกิดขึ้นได้อย่างไร สิ่งหนึ่งที่ฉันอยากจะชี้ให้เห็นก็คือ หากพื้นที่ที่จะวางมีขนาดเล็กเกินไป คำแนะนำเครื่องมืออาจปิดได้โดยไม่ได้ตั้งใจ ดังนั้นฉันจึงคงความล่าช้าไว้ ที่ กรณี
Chris Coyer จึงตอบสนองด้วยการใช้งานสมัยใหม่ที่ใช้ลิงก์โฟกัสที่มาพร้อมกับคุณสมบัติ CSS หลักสองประการ: interest-delay-start และ interest-delay-end. ในขณะนี้มีเพียง Chrome เท่านั้นที่สนับสนุนผู้เรียกความสนใจ แต่เป็นการปรับปรุงที่ก้าวหน้าใช่ไหม
เมื่อพูดถึงการปรับปรุงที่ก้าวหน้า Geolocation API ถือเป็นความท้าทายมาโดยตลอดเนื่องจากฮาร์ดแวร์ภายนอกทั้งหมด (ดาวเทียม GPS เครือข่าย Wi-Fi เสาส่งสัญญาณ ฯลฯ) และการเปลี่ยนแปลงสถานะการอนุญาตในภายหลังนั้นน่าหงุดหงิดเพียงใด
และเนื่องจากมีเพียง Chrome เท่านั้นที่รองรับ ฉันจึงอธิบายวิธีใช้งาน
ไมโครไฟแช็ก: ::highlight()– ปากกาเน้นข้อความไวยากรณ์
Dave Rupert ได้สร้างปากกาเน้นข้อความไวยากรณ์ขนาดเล็กชื่อ MicroLighter โดยใช้ Custom Highlight API ใหม่ เขายังแสดงให้เราเห็นถึงวิธีใช้ MicroLighter และ Jeff ก็พูดถึงเรื่องนั้นเล็กน้อยเช่นกัน
วิธีรับข้อมูลตาราง CSS ลงในตัวแปร CSS
ธีมของ Afif แสดงวิธีรับข้อมูลตาราง CSS ลงในคุณสมบัติ CSS ที่กำหนดเอง โดยเฉพาะวิธีการรับจำนวนแถวและคอลัมน์ รวมถึงพิกัด (ดัชนี x/y) ของแต่ละเซลล์ ข้อกำหนดเพียงอย่างเดียวคือคอลัมน์ต้องมีความกว้างเท่ากัน แต่ด้วยการพัฒนาของ CSS ในช่วงนี้ สิ่งนี้สามารถเปลี่ยนแปลงได้อย่างแน่นอน
เทมานียังแสดงให้เราเห็นว่าเราจะใช้สิ่งนี้เพื่อกำหนดความใกล้เคียงของโฮเวอร์ได้อย่างไร ซึ่งก็คือ มาก เย็น:
สถานะมืด: สองสถานะหรือสามสถานะ?
Lea Veru พูดสองรัฐ แต่ Brahms พูดสามรัฐ – คุณว่าอย่างไร? โดยส่วนตัวแล้ว ฉันชอบวิธีการอัตโนมัติในการยกเลิกทั้งสองกรณีที่ Vale.Rocks อธิบายไว้:
ความรู้เบื้องต้นเกี่ยวกับการเลือกคำนำหน้าชั้นเรียน
Brahms ยังแนะนำตัวเลือกคำนำหน้าคลาส ซึ่งถึงแม้จะยังไม่รองรับทุกที่ แต่ก็เรียบง่ายและมีประโยชน์มาก (ดังที่คุณเห็นด้านล่าง) ดังนั้นฉันจึงคาดว่าจะมีการเปลี่ยนแปลงอย่างรวดเร็วในเรื่องนี้
.something-* {
/* ... */
}สิ่งนี้สะอาดกว่าและมีประสิทธิภาพมากกว่าตัวเลือกแอตทริบิวต์:
[class^="something-"] {
/* Matches class="something-xxx" */
}
[class*=" something-"] {
/* Matches class="xxx something-xxx" */
}
[class*="something-"] {
/* Matches class="my-something-xxx" */
}นี่คือสิ่งที่ Jeff พูดเกี่ยวกับตัวเลือกคำนำหน้าชั้นเรียน
…และ named-feature() การทำงาน
บราห์มส์ (พูดตามตรง) ก็ปรากฏตัวด้วยเช่นกัน @supports named-feature() อย่างไรก็ตาม Chrome รองรับสิ่งนี้และขอการสนับสนุนสำหรับสิ่งที่เฉพาะเจาะจงมากซึ่งเป็นไปไม่ได้ที่จะถาม เช่น เบราว์เซอร์เคารพการเปลี่ยนแปลงเมื่อวางองค์ประกอบหรือไม่ แต่หวังว่า @supports มีความสามารถมากขึ้นอย่างสมบูรณ์
วิธีปรับสมดุลรายการที่ห่อระหว่างแถวหรือคอลัมน์
มีอะไรใหม่สำหรับ Chrome ต่อไปนี้ flex-wrap: balanceโดยพื้นฐานแล้ว text-wrap: balance แต่สำหรับสินค้าที่มีความยืดหยุ่น Ahmed Shadid อธิบายอะไร flex-wrap: balance มันทำอะไรและเราสามารถใช้เพื่ออะไร
คุณสมบัติและการอัพเดตแพลตฟอร์มเว็บใหม่
ฤดูใบไม้ร่วง/ฤดูใบไม้ร่วง มาแล้ว!
