Cara praktikal untuk menguji HTML dan CSS dalam masa nyata hanya menggunakan CSS.

Baru-baru ini, saya membuat umum rangka kerja CSS yang saya bangunkan untuk mencipta reka bentuk jejari. Semasa pembangunan, saya menghadapi beberapa cabaran, termasuk menguji ciri yang berbeza. Saya perasan bahawa linter CSS dan alatan lain tidak membenarkan saya melihat sebab sesuatu tidak berfungsi, walaupun tiada ralat asas. Satu lagi masalah CSS biasa ialah melihat cara ia dikongsi merentas pelayar yang berbeza. Nasib baik, saya mendapati bahawa ciri CSS baharu tertentu boleh digunakan untuk membuat satu siri ujian masa nyata. Ciri ini ialah @support, @container dan :has().

Dengan menggabungkan ciri-ciri ini, saya membangunkan sistem ujian bukan sahaja untuk menyemak sama ada rangka kerja berfungsi dalam penyemak imbas tetapi juga, dan yang paling penting, untuk melihat sama ada kami menggunakan HTML dengan betul mengikut keperluan penyemak imbas dan mengelakkan ralat tidak disengajakan semasa membangunkan permohonan.

Memandangkan rangka kerja CSS saya semestinya menggunakan ciri yang hanya ada pada pelayar terbaharu, seperti fungsi trigonometri seperti cos() dan sin(), saya mencipta satu siri peraturan untuk menguji sama ada ia disokong oleh penyemak imbas. Jika tidak, mesej muncul meminta untuk mengemas kini penyemak imbas. Begitu juga, jika penyemak imbas tidak menyokong :has(), yang digunakan di seluruh rangka kerja.

Terdapat juga kes tipikal ketidakserasian penyemak imbas, jadi dalam beberapa kes yang tidak kritikal, saya menggunakan @support atau @container untuk menyembunyikan ciri Orbit tertentu yang tidak menjejaskan penggunaannya. Contohnya, Safari tidak menerima pukulan konteks SVG, jadi saya menyembunyikannya.

Walau bagaimanapun, di luar semakan kritikal dan keserasian tersebut, isu yang paling biasa apabila menggunakan rangka kerja CSS ialah tidak mengetahui cara menggunakannya dengan betul. Itulah sebabnya saya mencipta peraturan CSS lain yang membenarkan analisis jika elemen induk mempunyai elemen anak yang diperlukan dan bukan unsur lain. Di sini, makluman visual turut muncul semasa membangun untuk memberi petunjuk tentang tempat ralat dalam kod.

Saya tidak mahu membosankan anda dengan butiran khusus untuk Orbit, tetapi saya akan meninggalkan anda pautan ke sumber sokongan dan dokumentasi yang berkaitan.

Repo: https://github.com/zumerlab/orbit
Fail sumber: https://github.com/zumerlab/orbit/blob/main/src/scss/_support.scss
Dokumentasi Sokongan Orbit: https://zumerlab.github.io/orbit-docs/tools/support/

Baik untuk mendalami: https://heydonworks.com/article/testing-html-with-modern-css

Atas ialah kandungan terperinci Cara praktikal untuk menguji HTML dan CSS dalam masa nyata hanya menggunakan CSS.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!