ຖ້າຂ້ອຍແບ່ງວິວັຖນາການ CSS ເປັນປະເພດ, ພວກເຮົາໄດ້ຍ້າຍອອກໄປໄກກວ່າມື້ທີ່ພວກເຮົາພຽງແຕ່ຮ້ອງຂໍໃຫ້ມີເສັ້ນຊາຍແດນ - ລັດສະໝີ ຮູ້ສຶກວ່າພວກເຮົາມີຊີວິດຢູ່ໃນອະນາຄົດ. ພວກເຮົາປະຈຸບັນດໍາລົງຊີວິດຢູ່ໃນຊ່ວງເວລາທີ່ເວທີກໍາລັງມອບເຄື່ອງມືໃຫ້ພວກເຮົາທີ່ບໍ່ພຽງແຕ່ປັບຊັ້ນຕາ, ແຕ່ໂດຍພື້ນຖານແລ້ວກໍານົດວິທີການທີ່ພວກເຮົາສະຖາປະນິກການໂຕ້ຕອບ. ຂ້າພະເຈົ້າຄິດວ່າຈໍານວນຂອງຄຸນສົມບັດທີ່ປະກາດໃນປີ 2024 ບໍ່ສາມາດໄດ້ຮັບການສູງສຸດ. ຂ້ອຍບໍ່ເຄີຍຜິດຫວັງເລີຍ.
“CSS Wrapped 2025” ຂອງທີມ Chrome ບໍ່ແມ່ນພຽງແຕ່ລາຍການຄຸນສົມບັດເທົ່ານັ້ນ; ມັນແມ່ນ manifesto ສໍາລັບເວັບແບບເຄື່ອນໄຫວ, ແບບພື້ນເມືອງ. ໃນຖານະເປັນຜູ້ທີ່ໄດ້ໃຊ້ເວລາສອງສາມປີເພື່ອບັນທຶກການວິວັດທະນາການເຫຼົ່ານີ້ - ຈາກການກໍານົດ "CSS5" eras ກັບ intricacies ຂອງ layout utilities ທີ່ທັນສະໄຫມ - ຂ້າພະເຈົ້າເຫັນວ່າຕົນເອງເບິ່ງການສະຫຼຸບຂອງປີນີ້ດ້ວຍຄວາມຕື່ນເຕັ້ນຫຼາຍ. ພວກເຮົາກໍາລັງເຫັນການປ່ຽນແປງໄປສູ່ "Ergonomics ທີ່ດີທີ່ສຸດ" ແລະ "ການໂຕ້ຕອບຄົນຕໍ່ໄປ" ທີ່ອະນຸຍາດໃຫ້ພວກເຮົາຢຸດເຊົາການຕໍ່ສູ້ກັບລະຫັດແລະເລີ່ມຕົ້ນການແກະສະຫຼັກການໂຕ້ຕອບໃນສະພາບທໍາມະຊາດຂອງພວກເຂົາ.
ໃນບົດຄວາມນີ້, ທ່ານສາມາດຊອກຫາລັກສະນະທີ່ສົມບູນແບບທີ່ໂດດເດັ່ນຈາກບົດລາຍງານຂອງ Chrome, ເບິ່ງຜ່ານທັດສະນະຂອງການທົດລອງທີ່ຜ່ານມາຂອງຂ້ອຍແລະຄວາມຫວັງສໍາລັບອະນາຄົດຂອງເວທີ.
ການປະຕິວັດອົງປະກອບ: ສຸດທ້າຍ, A Native Customizable Select
ສໍາລັບປີ, ພວກເຮົາໄດ້ອີງໃສ່ຫ້ອງສະຫມຸດ JavaScript ຢ່າງຮຸນແຮງເພື່ອເລື່ອນລົງຮູບແບບ, "ບັນຫາທີ່ມີອາຍຸຫລາຍສິບປີ" ທີ່ເວທີໄດ້ແກ້ໄຂໃນທີ່ສຸດ. ດັ່ງທີ່ຂ້ອຍໄດ້ລາຍລະອຽດໃນການລົງເລິກຂອງຂ້ອຍເຂົ້າໄປໃນປະຫວັດຂອງການເລືອກທີ່ສາມາດປັບແຕ່ງໄດ້ (ແລະບົດຄວາມທີ່ກ່ຽວຂ້ອງ), ນີ້ແມ່ນເສັ້ນທາງຍາວທີ່ກ່ຽວຂ້ອງກັບ Open UI, ຊື່ bikeshedding ເຊັ່ນ
ການເພີ່ມເຕີມທີ່ດີເລີດທີ່ຈະອະນຸຍາດໃຫ້ເນື້ອຫາອຸດົມສົມບູນພາຍໃນທາງເລືອກ, ເຊັ່ນ: ຮູບພາບຫຼືທຸງ, ແມ່ນມີຄວາມມ່ວນຫຼາຍ. ພວກເຮົາສາມາດສ້າງທຸກປະເພດຂອງການຄັດເລືອກໃນປັດຈຸບັນ:
ການສາທິດ: ຂ້ອຍສ້າງ Poké-adventure demo ສະແດງໃຫ້ເຫັນວ່າອົງປະກອບ
ເບິ່ງ Pen A ທີ່ສາມາດປັບແຕ່ງໄດ້ດ້ວຍຮູບພາບພາຍໃນຕົວເລືອກ ແລະເນື້ອໃນທີ່ເລືອກ [ forked] ໂດຍ utilitybend.
ການສາທິດ: ການເບິ່ງແບບຄົບວົງຈອນໃນການຈັດຮູບແບບການເລືອກທີ່ມີພຽງແຕ່ອົງປະກອບ pseudo.
ເບິ່ງ Pen A ທີ່ສາມາດປັບແຕ່ງໄດ້ໂດຍມີພຽງແຕ່ອົງປະກອບ pseudo-forked ໂດຍ utilitybend.
ການສາທິດ: ຫຼືທ່ານສາມາດຕີມັນຂຶ້ນໄດ້ດ້ວຍການສາທິດການເລືອກເມນູນີ້ໂດຍໃຊ້ optgroups.
ເບິ່ງ Pen ເມນູເລືອກຕົວຈິງກັບ optgroups [forked] ໂດຍ utilitybend. ຄຸນສົມບັດນີ້ຢ່າງດຽວເປັນສັນຍານການປ່ຽນແປງອັນໃຫຍ່ຫຼວງໃນວິທີການທີ່ພວກເຮົາຈະສ້າງແບບຟອມ, ຫຼຸດຜ່ອນການເພິ່ງພາອາໄສ ແລະໜີ້ສິນທາງວິຊາການ. Scroll Markers ແລະການເສຍຊີວິດຂອງ JavaScript Carousel ການສ້າງ carousels ໄດ້ປະຫວັດສາດເປັນຈຸດ friction ລະຫວ່າງນັກພັດທະນາແລະລູກຄ້າ. ລູກຄ້າຮັກພວກເຂົາ, ນັກພັດທະນາຢ້ານ JavaScript ທີ່ຕ້ອງການເພື່ອເຮັດໃຫ້ພວກເຂົາເຂົ້າເຖິງແລະປະຕິບັດໄດ້. ການມາເຖິງຂອງ ::scroll-marker ແລະ ::scroll-button() pseudo-elements ປ່ຽນແປງແບບເຄື່ອນໄຫວນີ້ທັງໝົດ. ຄຸນສົມບັດເຫຼົ່ານີ້ອະນຸຍາດໃຫ້ພວກເຮົາສ້າງຈຸດນໍາທາງແລະປຸ່ມເລື່ອນໄດ້ຢ່າງດຽວກັບ CSS, ເຊື່ອມຕໍ່ພື້ນເມືອງກັບຖັງເລື່ອນ. ດັ່ງທີ່ຂ້ອຍຂຽນໃນ blog ຂອງຂ້ອຍ, ນີ້ແມ່ນຄວາມຮັກຢູ່ໃນສະໄລ້ທໍາອິດ. ຄວາມສາມາດໃນການສ້າງ slider ທີ່ມີປະສິດຕິພາບຢ່າງເຕັມສ່ວນ, ສາມາດເຂົ້າເຖິງໄດ້ໂດຍບໍ່ມີເສັ້ນດຽວຂອງ JavaScript ແມ່ນບໍ່ພຽງແຕ່ສະດວກ; ມັນເປັນໄຊຊະນະສໍາລັບການປະຕິບັດ. ມີຄວາມເປັນຫ່ວງກ່ຽວກັບການເຂົ້າເຖິງບາງຢ່າງກ່ຽວກັບຄຸນສົມບັດນີ້, ແລະເຖິງແມ່ນວ່າສິ່ງເຫຼົ່ານີ້ຖືກຕ້ອງ, ມັນອາດມີວິທີການໃຫ້ພວກເຮົາຜູ້ພັດທະນາເພື່ອເຮັດໃຫ້ມັນເຮັດວຽກໄດ້. ສິ່ງທີ່ດີແມ່ນ, ການປ່ຽນແປງ UI ທັງຫມົດເຫຼົ່ານີ້ແມ່ນເຮັດໃຫ້ມັນງ່າຍກວ່າການຫມູນໃຊ້ DOM ແບບກໍາຫນົດເອງແລະລາກປະມານແທໍກ aria, ແຕ່ຂ້ອຍປະຕິເສດ ... ດຽວນີ້ພວກເຮົາສາມາດຈັດກຸ່ມເຄື່ອງ ໝາຍ ໂດຍອັດຕະໂນມັດໂດຍໃຊ້ກຸ່ມເຄື່ອງ ໝາຍ ເລື່ອນແລະຈັດຮູບແບບປຸ່ມໂດຍໃຊ້ການຈັດຕໍາແຫນ່ງສະມໍເພື່ອຈັດວາງພວກມັນຢູ່ບ່ອນທີ່ພວກເຮົາຕ້ອງການ.
.carousel { overflow-x: ອັດຕະໂນມັດ; scroll-marker-group: ຫຼັງ; /* ສ້າງ container ສໍາລັບຈຸດ */
/* ສ້າງປຸ່ມ */ &::scroll-button(inline-end),&::scroll-button(inline-start) { ເນື້ອໃນ: ""; ຕໍາແໜ່ງ: ຢ່າງແທ້ຈິງ; /* ໃຊ້ການຈັດຕໍາແໜ່ງສະມໍເພື່ອວາງພວກມັນໄວ້ກາງ */ position-anchor: --carousel; ເທິງ: ສະມໍ(ສູນກາງ); }
/* ສ້າງເຄື່ອງຫມາຍກ່ຽວກັບເດັກນ້ອຍ */ div { &::ເຄື່ອງໝາຍເລື່ອນ { ເນື້ອໃນ: ""; width: 24px; border-radius: 50%; ຕົວກະພິບ: ຕົວຊີ້; } /* ເນັ້ນໃສ່ເຄື່ອງໝາຍທີ່ມີການເຄື່ອນໄຫວ */ &::scroll-marker:target-current { ພື້ນຫລັງ: ສີຂາວ; } } }
Demo: ການທົດລອງຂອງຂ້ອຍສ້າງ carousel ອອກຈາກ HTML ແລະ CSS, ໂດຍໃຊ້ການຈັດຕໍາແຫນ່ງສະມໍເພື່ອວາງປຸ່ມ.
ເບິ່ງ Pen Carousel Pure HTML ແລະ CSS [forked] ໂດຍ utilitybend.
ການສາທິດ: Webshop slick slider remake ໂດຍໃຊ້ attr() ເພື່ອດຶງຮູບພາບພື້ນຫຼັງແບບເຄື່ອນໄຫວເຂົ້າໄປໃນເຄື່ອງໝາຍ.
ເບິ່ງ Pen Webshop slick slider remake ໃນ CSS [forked] ໂດຍ utilitybend. ຄຳຖາມຂອງລັດ: ໜຽວຕິດຢູ່ບໍ? Snappy ສິ່ງ Snapped? ເປັນເວລາດົນນານ, ພວກເຮົາຂາດຄວາມສາມາດໃນການຮູ້ວ່າ "ສິ່ງທີ່ຫນຽວຕິດຢູ່" ຫຼືຖ້າ "ລາຍການ snappy ຖືກ snapped" ໂດຍບໍ່ມີການອີງໃສ່ການ hack IntersectionObserver. Chrome 133 ໄດ້ນໍາສະເຫນີການສອບຖາມສະຖານະການເລື່ອນ, ເຮັດໃຫ້ພວກເຮົາສາມາດສອບຖາມລັດເຫຼົ່ານີ້ຢ່າງຈະແຈ້ງ. ໂດຍການຕັ້ງຄ່າປະເພດບັນຈຸ: ເລື່ອນສະຖານະ, ຕອນນີ້ພວກເຮົາສາມາດຈັດຮູບແບບເດັກນ້ອຍໂດຍອີງໃສ່ວ່າພວກເຂົາຕິດຢູ່, ຖືກຈັບ, ຫຼືລົ້ນ. ນີ້ແມ່ນການປັບປຸງ "ຄຸນນະພາບຊີວິດ" ອັນໃຫຍ່ຫຼວງທີ່ຂ້ອຍໄດ້ລໍຖ້າຢ່າງກະຕືລືລົ້ນຕັ້ງແຕ່ວັນ CSS 2023. ມັນໄດ້ພັດທະນາໄປຫຼາຍສົມຄວນ ເພາະພວກເຮົາຍັງສາມາດເຫັນທິດທາງຂອງເລື່ອນໄດ້, ໜ້າຮັກ! ຕົວຢ່າງງ່າຍໆ: ສຸດທ້າຍພວກເຮົາສາມາດນຳໃຊ້ເງົາໃສ່ສ່ວນຫົວໄດ້ພຽງແຕ່ເມື່ອມັນຕິດຢູ່ເທິງສຸດຂອງ viewport ເທົ່ານັ້ນ: .header-container { container-type: scroll-state; ຕໍາແໜ່ງ: ໜຽວ; ເທິງ: 0;
ສ່ວນຫົວ { ການຫັນປ່ຽນ: box-shadow 0.5s ງ່າຍອອກ; /* ການສອບຖາມກວດສອບສະຖານະຂອງພາຊະນະ */ @container scroll-state(ຕິດຢູ່: ເທິງ) { box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
ການສາທິດ: ຫົວໜຽວທີ່ໃຊ້ເງົາພຽງແຕ່ເມື່ອມັນຕິດຢູ່.
ເບິ່ງສ່ວນຫົວຂອງ Pen Sticky ດ້ວຍການສອບຖາມສະຖານະການເລື່ອນ, ກວດເບິ່ງວ່າອົງປະກອບຫນຽວຖືກຕິດ [ສ້ອມ] ໂດຍ utilitybend.
ການສາທິດ: ລາຍຊື່ Pokémon-themed ທີ່ໃຊ້ການສອບຖາມແບບເລື່ອນພາບລວມກັບການຈັດຕຳແໜ່ງສະມໍເພື່ອຍ້າຍກອບໄປໃສ່ຕົວລະຄອນທີ່ຖ່າຍຢູ່ໃນປັດຈຸບັນ.
ເບິ່ງການສອບຖາມ Pen Scroll-state ເພື່ອກວດເບິ່ງວ່າລາຍການໃດຖືກ snapped ດ້ວຍ CSS, Pokemon version [forked] ໂດຍ utilitybend. ການ Ergonomics ທີ່ດີທີ່ສຸດ: Logic ໃນ CSS ພາກສ່ວນ “ການປັບແຕ່ງການຍິຍະສາດ” ຂອງ CSS Wrapped ຈຸດເດັ່ນທີ່ເຮັດໃຫ້ຂະບວນການເຮັດວຽກຂອງພວກເຮົາມີຄວາມຄ່ອງແຄ້ວຫຼາຍຂຶ້ນ. ສາມລັກສະນະທີ່ໂດດເດັ່ນເປັນການປ່ຽນແປງສໍາລັບວິທີທີ່ພວກເຮົາຂຽນເຫດຜົນ:
if() Statements ພວກເຮົາສຸດທ້າຍໄດ້ຮັບເງື່ອນໄຂໃນ CSS. ຟັງຊັນ if() ເຮັດໜ້າທີ່ຄືກັບຕົວປະຕິບັດການ ternary ສໍາລັບ stylesheets, ອະນຸຍາດໃຫ້ພວກເຮົານໍາໃຊ້ຄ່າໂດຍອີງໃສ່ສື່, ການສະຫນັບສະຫນູນ, ຫຼືແບບສອບຖາມໃນແຖວ. ນີ້ຊ່ວຍຫຼຸດຜ່ອນຄວາມຕ້ອງການ verbose @media blocks ສໍາລັບການປ່ຽນແປງຊັບສິນດຽວ. ຟັງຊັນ @function ໃນທີ່ສຸດພວກເຮົາສາມາດຍ້າຍບາງເຫດຜົນໄປຫາບ່ອນທີ່ແຕກຕ່າງກັນ, ສົ່ງຜົນໃຫ້ບາງໄຟລ໌ທີ່ສະອາດ, ຄຸນສົມບັດຊີວິດທີ່ແທ້ຈິງ. sibling-index() ແລະ sibling-count()ຟັງຊັນການນັບຕົ້ນໄມ້ເຫຼົ່ານີ້ແກ້ໄຂບັນຫາຂອງພາບເຄື່ອນໄຫວທີ່ງຶດງໍ້ ຫຼືລາຍການສະໄຕລ໌ຕາມຂະໜາດລາຍການ. ດັ່ງທີ່ຂ້ອຍໄດ້ຄົ້ນຫາໃນ Styling ອ້າຍເອື້ອຍນ້ອງກັບ CSS ບໍ່ເຄີຍງ່າຍຂຶ້ນ, ນີ້ຈະລົບລ້າງຄວາມຈໍາເປັນຂອງ hard-code ຄຸນສົມບັດ custom (ເຊັ່ນ --index: 1) ໃນ HTML ຂອງພວກເຮົາ.
ຕົວຢ່າງ: ການຄິດໄລ່ການຈັດວາງ ດຽວນີ້ພວກເຮົາສາມາດຂຽນສູດຄະນິດສາດທີ່ຫຍໍ້ໆ. ຕົວຢ່າງ, ການເຮັດໃຫ້ພາບເຄື່ອນໄຫວສໍາລັບບັດທີ່ເຂົ້າໄປໃນຫນ້າຈໍກາຍເປັນເລື່ອງເລັກນ້ອຍ: .card-container > * { ການເຄື່ອນໄຫວ: ເປີດເຜີຍ 0.6s ງ່າຍອອກ forwards; /* ບໍ່ມີຕົວແປ --index ຄູ່ມືເພີ່ມເຕີມ! */ animation-delay: calc(sibling-index() * 0.1s); }
ຂ້ອຍຍັງໄດ້ທົດລອງໃຊ້ຟັງຊັນເຫຼົ່ານີ້ພ້ອມກັບສາມຫລ່ຽມເພື່ອວາງລາຍການໃນວົງມົນທີ່ສົມບູນແບບໂດຍບໍ່ມີ JavaScript.
ການສາທິດ: ອະນິເມຊັນຂອງບັດທີ່ສັ່ນສະເທືອນແບບເຄື່ອນໄຫວ.
ເບິ່ງບັດ Pen Stagger ໂດຍໃຊ້ sibling-index() [forked] ໂດຍ utilitybend.
ການສາທິດ: ການຈັດວາງລາຍການໃນວົງມົນທີ່ສົມບູນແບບໂດຍນໍາໃຊ້ດັດຊະນີ sibling, sibling-count, ແລະຄຸນສົມບັດ CSS @function ໃຫມ່.
ເບິ່ງ Pen the Circle ໂດຍໃຊ້ sibling-index, sibling-count and functions [forked] by utilitybend. CSS To-Do List ຂອງຂ້ອຍ: ຄຸນສົມບັດທີ່ຂ້ອຍບໍ່ສາມາດລໍຖ້າລອງໄດ້ ໃນຂະນະທີ່ຂ້ອຍຫຍຸ້ງຢູ່ກັບການແກະສະຫຼັກການຄັດເລືອກ ແລະການປ່ຽນແປງ, ບົດລາຍງານ "CSS Wrapped 2025" ເຕັມໄປດ້ວຍສິ່ງດີໆອື່ນໆທີ່ຂ້ອຍຍັງບໍ່ມີໂອກາດທີ່ຈະອອກມາໃນ CodePen ເທື່ອ. ເຫຼົ່ານີ້ແມ່ນສູງຢູ່ໃນບັນຊີລາຍຊື່ຂອງຂ້ອຍສໍາລັບການທົດລອງຕໍ່ໄປຂອງຂ້ອຍ: Anched Container Queries ຂ້ອຍໃຊ້ CSS Anchor Positioning ສໍາລັບປຸ່ມຕ່າງໆໃນຕົວຢ່າງ carousel ຂອງຂ້ອຍ, ແຕ່ "CSS Wrapped" ຊີ້ໃຫ້ເຫັນເຖິງevolution ຂອງນີ້: Anchored Container Queries. ນີ້ແກ້ໄຂບັນຫາທີ່ພວກເຮົາທຸກຄົນມີກັບຄໍາແນະນໍາເຄື່ອງມື: ຖ້າຕົວທ່ອງເວັບຫັນຄໍາແນະນໍາເຄື່ອງມືຈາກເທິງລົງລຸ່ມເນື່ອງຈາກຂໍ້ຈໍາກັດຂອງຊ່ອງ, "ລູກສອນ" ມັກຈະຊີ້ໄປໃນທາງທີ່ຜິດ. ດ້ວຍການສອບຖາມຕູ້ຄອນເທນເນີທີ່ຍຶດໄວ້ (@container anchored(fallback: flip-block)), ພວກເຮົາສາມາດຈັດຮູບແບບອົງປະກອບໂດຍອີງໃສ່ຕໍາແຫນ່ງ fallback ທີ່ຕົວທ່ອງເວັບເລືອກຕົວຈິງ. Nested View ກຸ່ມການຫັນປ່ຽນ View Transitions ເປັນການປະຕິວັດ, ແຕ່ພວກມັນມາພ້ອມກັບການຄ້າຂາຍສະເພາະ: ພວກມັນແປຮູບຕົ້ນໄມ້ອົງປະກອບ, ເຊິ່ງມັກຈະທໍາລາຍການຫັນເປັນ 3D ຫຼືລົ້ນ: clip. ຂ້ອຍຮູ້ສຶກສະເຫມີວ່າມັນຂາດບາງສິ່ງບາງຢ່າງ, ແລະນີ້ອາດຈະເປັນຄໍາຕອບເທົ່ານັ້ນ. ໂດຍການນໍາໃຊ້ view-transition-group: ທີ່ໃກ້ທີ່ສຸດ, ໃນທີ່ສຸດພວກເຮົາສາມາດສ້າງກຸ່ມການປ່ຽນແປງພາຍໃນກັນແລະກັນ. ນີ້ອະນຸຍາດໃຫ້ພວກເຮົາຮັກສາຜົນກະທົບ clipping ຫຼືການຫມຸນ 3D ໃນໄລຍະການຫັນປ່ຽນ - ບາງສິ່ງບາງຢ່າງທີ່ເປັນໄປບໍ່ໄດ້ກ່ອນຫນ້ານີ້ເນື່ອງຈາກວ່າອົງປະກອບໄດ້ຖືກຍົກຂຶ້ນມາໃນລະດັບສູງສຸດ. .ບັດ img { view-transition-name: ຮູບ; view-transition-group: ທີ່ໃກ້ທີ່ສຸດ; /* ໃຫ້ມັນຮັງ! */ }
Typography ແລະຮູບຮ່າງ ສຸດທ້າຍ, ergonomist ໃນຂ້ອຍແມ່ນອາການຄັນທີ່ຈະພະຍາຍາມ Text Box Trim, ເຊິ່ງສັນຍາວ່າຈະເອົາພື້ນທີ່ຫວ່າງພິເສດທີ່ ໜ້າ ລຳຄານທີ່ຢູ່ເທິງແລະລຸ່ມເນື້ອໃນຂໍ້ຄວາມ (ຊັ້ນ ນຳ) ເພື່ອບັນລຸການຈັດວາງແນວຕັ້ງທີ່ສົມບູນແບບ. ແລະສໍາລັບດ້ານສ້າງສັນ, ຮູບຮ່າງຂອງມຸມແລະຮູບຮ່າງ () ຫນ້າທີ່ກໍາລັງເປີດຮູບແບບທີ່ບໍ່ແມ່ນສີ່ຫລ່ຽມ, ອະນຸຍາດໃຫ້ "squaricles" ແລະເສັ້ນທາງສະລັບສັບຊ້ອນທີ່ຕອບສະຫນອງກັບຕົວແປ CSS. ເວົ້າແນວນັ້ນ, ຂ້ອຍບໍ່ສາມາດລໍຖ້າການອອກແບບທີ່ເຕັມໄປດ້ວຍກະຮອກ! ອະນາຄົດທີ່ມີຄວາມຫວັງ ພວກເຮົາກໍາລັງເປັນພະຍານເຖິງໂລກທີ່ CSS ກາຍເປັນຄວາມສາມາດໃນການຈັດການກັບເຫດຜົນ, ລັດ, ແລະການໂຕ້ຕອບທີ່ສັບສົນທີ່ເຄີຍເປັນຂອງ JavaScript. ຄຸນສົມບັດຕ່າງໆເຊັ່ນ: moveBefore (ຮັກສາສະຖານະ DOM ສໍາລັບ iframes/ວິດີໂອ) ແລະ attr() (ໃຊ້ປະເພດນອກເໜືອໄປຈາກສະຕຣິງສຳລັບສີ ແລະຕາໜ່າງ) ເສີມສ້າງຄວາມເປັນຈິງນີ້. ໃນຂະນະທີ່ບາງຄຸນສົມບັດເຫຼົ່ານີ້ຢູ່ໃນຂະນະທົດລອງ ຫຼືສະເພາະກັບ Chrome, ຊ່ວງເວລາແມ່ນປະຕິເສດບໍ່ໄດ້. ພວກເຮົາຕ້ອງຫວັງວ່າຈະໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງຕໍ່ເນື່ອງໃນທົ່ວທຸກຕົວທ່ອງເວັບໂດຍຜ່ານການລິເລີ່ມເຊັ່ນ Interop ເພື່ອຮັບປະກັນຄວາມສາມາດເຫຼົ່ານີ້ກາຍເປັນພື້ນຖານ. ວ່າໄດ້ຖືກກ່າວວ່າ, ການມີເຄື່ອງຈັກໃນຕົວທ່ອງເວັບແມ່ນມີຄວາມສໍາຄັນຄືກັນກັບການມີຄຸນສົມບັດທີ່ຫນ້າຫວາດສຽວເຫຼົ່ານີ້ຢູ່ໃນ "Chrome ທໍາອິດ". ຄຸນນະສົມບັດໃຫມ່ເຫຼົ່ານີ້ຕ້ອງໄດ້ຮັບການສົນທະນາ, tinkered ກັບ, ແລະການທົດສອບກ່ອນທີ່ຈະລົງຈອດໃນຕົວທ່ອງເວັບ. ມັນເປັນຊ່ວງເວລາທີ່ດີເລີດທີ່ຈະເຂົ້າໄປໃນ CSS. ພວກເຮົາແມ່ນບໍ່ມີຕໍ່ໄປອີກແລ້ວພຽງແຕ່ເອກະສານຄໍເຕົ້າໄຂ່ທີ່; ພວກເຮົາກຳລັງສ້າງແອັບພລິເຄຊັນແບບເຄື່ອນໄຫວ, ເໝາະກັບຕົວຕົນ, ແລະແຂງແຮງດ້ວຍຊຸດເຄື່ອງມືພື້ນເມືອງທີ່ມີອໍານາດຫຼາຍກວ່າທີ່ເຄີຍມີມາ. ຂໍໃຫ້ກ້າວໄປສູ່ຍຸກໃຫມ່ນີ້ແລະເຜີຍແຜ່ຄໍາເວົ້າ. ນີ້ແມ່ນ CSS ຫໍ່!
