เราสามารถจัดเก็บข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบได้โดยใช้ attribute data-* ตัวอย่างต่อไปนี้แสดงการใช้งาน data-* attribute ใน CSS ตัวอย่างที่ 1: การใช้กับ JavaScript <!DOCTYPE html> <html> <head> <style> dl { margin: 2%; } p { width: 60%; background-color: li

เพื่อปิดใช้งานการจับตำแหน่งเลื่อน (scroll anchoring) เริ่มต้นที่เบราว์เซอร์ให้ เราสามารถใช้คุณสมบัติ overflow-anchor ได้ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { overflow-anchor: none; } div{ display: flex; flex-direction: row; } </style>

ด้วยคุณสมบัติ pointer-events ใน CSS เราสามารถควบคุมได้ว่าจะอนุญาตให้เมาส์และการสัมผัสทำงานบนองค์ประกอบหรือไม่ ไวยากรณ์ (Syntax) pointer-events: auto|none; โดยที่: auto (ค่าเริ่มต้น): องค์ประกอบตอบสนองต่อเหตุการณ์พอยน์เตอร์ none: องค์ประกอบไม่ตอบสนองต่อเหตุการณ์พอยน์เตอร์ ตัวอย่างที่ 1: การปิดใช้

สำหรับการเปลี่ยนสีของเคอร์เซอร์ (insertion caret) ใช้คุณสมบัติ caret-color ใน CSS ตัวอย่างที่ 1: การตั้งสีเคอร์เซอร์แบบกำหนดเอง <!DOCTYPE html> <html> <head> <style> form { padding: 2%; margin: 2%; text-align: center; } form:focus-within { box-shadow: 0 0 1

คุณสมบัติ tab-size ใน CSS ช่วยให้เราตั้งค่าปริมาณช่องว่างที่ใช้ในแท็บได้ ตัวอย่างต่อไปนี้แสดงการใช้งานคุณสมบัติ tab-size ตัวอย่างที่ 1: การเปรียบเทียบขนาดแท็บ <!DOCTYPE html> <html> <head> <style> body { display: flex; flex-direction: column; } p { white-space

คุณสมบัติ text-justify ใน CSS ช่วยระบุประเภทการจัดเรียงข้อความสำหรับองค์ประกอบหนึ่งๆ ส่วนคุณสมบัติ text-align ใช้ตั้งค่าการจัดแนวข้อความแนวนอนในองค์ประกอบ ตัวอย่างที่ 1: การใช้ inter-character <!DOCTYPE html> <html> <head> <style> article { margin: 3%; background-c

ด้วยคุณสมบัติ hyphens ใน CSS เราสามารถระบุวิธีการเพิ่มเครื่องหมายยูนิโค้ด (hyphens) ในข้อความได้ ตัวอย่างที่ 1: การเปรียบเทียบ none และ manual <!DOCTYPE html> <html> <head> <style> div { width: 20%; border: 2px groove lime; margin: 10px; padding: 10px; hyp

คุณสมบัติ text-indent ใน CSS ช่วยให้เราระบุปริมาณช่องว่างสำหรับการเยื้องข้อความได้ ตัวอย่างที่ 1: การเยื้องพื้นฐาน <!DOCTYPE html> <html> <head> <style> p { text-indent: 15%; } article { background-color: darkgray; margin: 2%; } </style> </head>

ด้วยการนำคุณสมบัติ text-decoration ใหม่ๆ มาใช้งาน เราสามารถจัดรูปแบบข้อความได้หลากหลายมากกว่าเดิม คุณสมบัติ text-decoration เป็น shorthand สำหรับ text-decoration-thickness, text-decoration-color, text-decoration-line และ text-decoration-style ส่วน text-decoration-skip, text-decoration-skip-ink, text

การเปลี่ยนสีข้อความและสีพื้นหลังของหน้าเว็บ ช่วยให้เราสามารถเพิ่มฟีเจอร์โหมดมืด (Dark Mode) และโหมดสว่าง (Light Mode) ให้กับเว็บไซต์ได้อย่างง่ายดาย ไวยากรณ์ (Syntax) ใช้รูปแบบต่อไปนี้เพื่อใช้งานโหมดมืด: Selector { color: white; background-color: black } ตัวอย่างที่ 1: การสลับโหมดพื้นฐาน <

เราสามารถเปลี่ยนพฤติกรรมการเลื่อนเกินขอบเขตหน้าเว็บด้วยคุณสมบัติ CSS overscroll-behavior ซึ่งสามารถปิดใช้งาน Pull-to-Refresh บนเบราว์เซอร์มือถือได้ ไวยากรณ์ Selector { overscroll-behavior: /*value*/ } ตัวอย่างที่ 1: ใช้กับคอนเทนเนอร์เฉพาะ <!DOCTYPE html> <html> <head> <style>

เพื่อช่วยให้นักพัฒนาปรับแต่งเว็บไซต์ด้วยการผสมผสาน JavaScript และ CSS คุณสมบัติ CSS ใหม่ๆ ได้รับการพัฒนาและรองรับในเบราว์เซอร์ยอดนิยม สรุปคุณสมบัติสำคัญดังนี้: focus-within แก้ปัญหา accessibility การโฟกัสภายในองค์ประกอบ scroll-snap เปิดใช้งานการเลื่อนและการชะลอแบบเนทีฟ (native scroll snap) @media (

ใช้ pseudo-class :not() ของ CSS เพื่อคัดเลือกองค์ประกอบที่ไม่ตรงกับเงื่อนไขที่กำหนด ตัวอย่างที่ 1: เลือก <p> ที่ไม่ได้อยู่ใน <div> <!DOCTYPE html> <html> <head> <style> p {    background-color: cornflowerblue;    color: white; } p:not(div>p

โดยการตั้งค่า position: sticky และ top: 0 เราสามารถสร้างหัวตารางที่ติดตลอดเมื่อเลื่อนลงได้ ตัวอย่างที่ 1: ตารางพร้อมเนื้อหาเพิ่มเติม <!DOCTYPE html> <html> <head> <style> div {    color: white;    display: flex;    padding: 2%;    back

Pseudo-class (คลาสปลอม) Pseudo-class แทนสถานะของ selector เช่น :hover, :active, :last-child เริ่มต้นด้วยเครื่องหมายโคลนเดี่ยว : :pseudo-class{ attribute: /*value*/ } Pseudo-element (องค์ประกอบปลอม) Pseudo-element ใช้เลือกองค์ประกอบเสมือนจริง เช่น ::after, ::before, ::first-line เริ่มต้นด้วยเครื่องห

ใช้ pseudo-element ::placeholder เพื่อเปลี่ยนสีข้อความ placeholder ในช่องกรอกข้อความ ไวยากรณ์ ::placeholder { attribute: /*value*/ } ตัวอย่างที่ 1: เปลี่ยนสีเฉพาะช่องกรอกลำดับคู่ <!DOCTYPE html> <html> <head> <style> input:last-child::placeholder {    color: cornfl

เราสามารถสร้างเครื่องหมายถูกแบบกำหนดเองได้ด้วย CSS ตัวอย่างต่อไปนี้แสดงเทคนิคต่างๆ ตัวอย่างที่ 1: ใช้ pseudo-elements ::before และ ::after <!DOCTYPE html> <html> <style> div {    margin: 2%;    position: relative;    width: 40px;    height:

เพื่อปรับแต่งสไตล์สำหรับช่องกรอกข้อความที่มี placeholder เราใช้ pseudo-class :placeholder-shown ของ CSS ตัวอย่างที่ 1: เปลี่ยนสีขอบตามประเภทช่องกรอก <!DOCTYPE html> <html> <head> <style> input:placeholder-shown {    border-color: dodgerblue; } input:nth-of-type(eve

ไวยากรณ์ Selector {    flex: /*value*/ } ตัวอย่างที่ 1: ใช้ margin-top: auto เพื่อผลักองค์ประกอบสุดท้ายไปด้านล่าง <!DOCTYPE html> <html>    <head>       <style>          div {           &nbs

ไวยากรณ์ รูปแบบของคุณสมบัติ CSS flex มีดังนี้: Selector {    flex: /*value*/ } ตัวอย่างที่ 1: จัดวางซ้าย-ขวาด้วย justify-content <!DOCTYPE html> <html>    <head>       <style>          #container {     &nb