เพื่อช่วยให้นักพัฒนาปรับแต่งเว็บไซต์ของตนด้วยการผสมผสานระหว่าง JavaScript และ CSS คุณสมบัติ CSS ใหม่ได้รับการพัฒนาและสนับสนุนเบราว์เซอร์ยอดนิยมในขณะนี้ บางส่วนมีดังต่อไปนี้ −
โฟกัส-ภายใน
มีจุดมุ่งหมายเพื่อแก้ปัญหาการเข้าถึงโฟกัสภายในองค์ประกอบ
เลื่อนสแนป
ซึ่งจะทำให้การเลื่อนและการชะลอตัวแบบเนทีฟ
@media(prefers-*)
ช่วยตั้งค่าทั้ง UI และ UX ของหน้าตามการตั้งค่าอุปกรณ์ของผู้ใช้ ซึ่งช่วยให้มีความเป็นส่วนตัวในระดับที่สูงขึ้น
* สามารถระบุระดับแสง สีบังคับ โทนสี คอนทราสต์ ลดการเคลื่อนไหว และความโปร่งใสลดลง
ตำแหน่ง:เหนียว
เพื่อให้ UI อยู่ในวิวพอร์ต
คุณสมบัติเชิงตรรกะสำหรับการมีเลย์เอาต์มาตรฐาน
ช่วยให้เรามีระยะห่างระหว่างทิศทางแบบไดนามิกภายในและรอบๆ องค์ประกอบ
คุณสมบัติช่องว่าง
คุณสมบัตินี้พร้อมใช้งานสำหรับ flexbox แล้ว gap ตั้งค่าคอนเทนเนอร์ให้เป็นเจ้าของการเว้นวรรค แทนที่จะให้องค์ประกอบย่อยแต่ละรายการมีระยะห่างของตัวเอง
ตัวกรองด้านหลัง
เพื่อความสะดวกในการตั้งค่าสไตล์เบื้องหลังองค์ประกอบ
CSS Houdini API
API ระดับต่ำที่ช่วยให้นักพัฒนาสามารถบอกเบราว์เซอร์ว่าต้องการอ่านและทำความเข้าใจ CSS ที่กำหนดเองอย่างไร นักพัฒนาสามารถเข้าถึง CSS Object Model ได้ด้วยวิธีการบริโภคที่มากขึ้น Layout API, Paint API, Parser API, Properties &Values API, AnimationWorklet, Typed OM และ Font Metrics API อยู่ภายใต้สิ่งนี้
อัตราส่วนภาพ
รักษาขนาดของสื่อ
ขนาด
กำหนดความสูงและความกว้างในแอตทริบิวต์เดียว
นาที(), สูงสุด() และแคลมป์()
กำหนดข้อจำกัดคุณสมบัติ CSS ใดๆ
จอแสดงผล:ด้านนอกด้านใน
ไวยากรณ์อันมีค่าสองแบบสำหรับองค์ประกอบที่เหมาะสมยิ่งขึ้น
list-style-type
เพิ่มสไตล์ที่กำหนดเองลงในรายการ
โมดูล CSS
ตอนนี้เราสามารถใช้ JavaScript เพื่อขอโมดูลเฉพาะจากไฟล์ในเครื่องหรือไฟล์ระยะไกลได้
ภูมิภาค CSS
เติมเนื้อหาในพื้นที่
ตารางย่อย CSS
ช่วยเราสร้างเค้าโครงขนาดเล็กด้วยเค้าโครงขนาดเล็กใน CSS Grid
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงคุณสมบัติบางอย่าง -
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
text-align: center;
}
:is(header, main, footer) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:matches(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html> ผลลัพธ์
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตัวอย่าง
<html>
<head>
<style>
#parent {
margin: 8%;
background-image: url("https://images.unsplash.com/photo-1611081352477- 9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400");
padding: 2%;
width: 200px;
height: 200px;
box-shadow: 0 0 20px rgba(100,0,40,0.8);
}
h2 {
margin-top: 20vh;
backdrop-filter: invert(1);
}
</style>
</head>
<body>
<div id="parent">
<div>
<h2>Watch this cool effect</h2>
</div>
</div>
</body> ผลลัพธ์
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
