3
Kunci Takeaways 
Artikel membincangkan peralihan daripada menggunakan CSS terapung ke Flexbox untuk menstrukturkan susun atur dalam CSS. Ia menyoroti batasan sintaks lama dan tweener flexbox dan mengesyorkan hanya menargetkan versi sintaks dan penyemak imbas Tweener yang melaksanakan sepenuhnya sintaks baru.
Panduan Lengkap ke Flexbox oleh Chris Coyier pada CSS-Tricks
Layout Flexible Box ("Flexbox") di Internet Explorer 10 di MSDN (Pilihan)
Modul susun atur kotak fleksibel (a.k.a. flexbox) adalah cara baru penstrukturan susun atur dalam CSS. Ia telah menjalani pelbagai semakan dan telah berkembang dengan ketara dalam kewujudannya yang agak singkat. Pada masa penulisan Flexbox masih merupakan draf kerja W3C, tetapi, seperti piawaian lain, yang tidak sepatutnya membuatnya tidak menarik dalam persekitaran pengeluaran.
Terdapat tiga lelaran standard, yang biasanya dirujuk sebagai sintaks lama, sintaks Tweener dan sintaks baru.
Keterbatasan Flexbox didokumentasikan dengan baik:
Pembungkus (Flex-Wrap) adalah ciri penting spesifikasi, yang diperlukan untuk membuat grid responsif. Atas sebab ini, sebaiknya menargetkan versi sintaks Tweener dan penyemak imbas yang melaksanakan sepenuhnya sintaks baru.
Ini meninggalkan kami dengan versi penyemak imbas berikut:
kerana terdapat pelayar dengan bahagian pasaran yang penting yang tidak menyokong Flexbox, ini harus ditolak untuk menggunakan terapung CSS. Tetapi bagaimana ini boleh dinyatakan dalam kod? Apakah cara terbaik untuk membezakan antara versi penyemak imbas yang harus menerima CSS dengan terapung dan bukannya Flexbox? Strategi apa yang boleh digunakan untuk memastikan versi Firefox yang menyokong sintaks baru tetapi tidak menyokong pembalut dikenal pasti sebagai warisan?
memperkenalkan: memotong mustard.
Jika anda tidak pernah mendengarnya sebagai istilah teknikal sebelum ini, "memotong mustard" dicipta oleh pasukan pembangunan di BBC News. Istilah ini berpunca daripada fakta bahawa laman web BBC mesti memenuhi khalayak dan penargetan versi dan peranti penyemak imbas yang luas akan menjadi penyelesaian yang rumit.
Intix konsep ini mengenal pasti pelayar/peranti/ejen pengguna yang sedang digunakan dan menghidangkan polyfills untuk mendapatkan tapak berfungsi. Kewujudan ciri -ciri khusus dikesan di sisi klien dan oleh itu penyelesaian yang paling sesuai untuk teknologi yang ada disampaikan.
Pengesanan ciri bukanlah perkara baru. Artikel BBC yang disebutkan di atas telah diterbitkan pada bulan Mac 2012 dan sementara ia telah berkembang popular, ia menghairankan untuk melihat laman web yang masih melaksanakan kelas bersyarat khusus IE seperti yang dipopularkan oleh Paul Irish pada tahun 2008.
Modernizr (disumbangkan oleh Paul Irish) adalah mengenai pengesanan ciri:
Mengambil kesempatan daripada teknologi web baru yang sejuk sangat menyeronokkan, sehingga anda perlu menyokong penyemak imbas yang ketinggalan. Modernizr memudahkan anda menulis JavaScript dan CSS bersyarat untuk mengendalikan setiap situasi, sama ada penyemak imbas menyokong ciri atau tidak. Ia sesuai untuk melakukan peningkatan progresif dengan mudah.
Walaupun CSS kini mempunyai pengesanan ciri asli, ia kini tidak mempunyai bahagian pasaran yang mencukupi untuk menjadi berdaya maju untuk kegunaan dunia nyata. Selebihnya artikel ini akan membincangkan bagaimana untuk merapatkan komen bersyarat IE memihak kepada pengesanan ciri dalam JavaScript.
Setiap projek memerlukan satu set ciri yang berbeza untuk berfungsi. Terdapat pelbagai cara pengesanan ciri dapat direalisasikan, yang paling mudah termasuk:
Pendekatan yang paling berkesan ialah pelaksanaan vanila JavaScript. Ia pantas (kerana ia tidak memerlukan pelanggan untuk memuat turun mana -mana perpustakaan tambahan) dan tidak memerlukan sebarang pemprosesan tambahan. Pendekatan ini jauh dari sempurna kerana terdapat masalah yang diketahui; Walau bagaimanapun ada cara untuk mengatasi masalah pengesanan ciri biasa.
[b] Pengesanan rowser telah menjadi kusut yang mustahil, dan sebahagian besarnya tidak dapat digunakan, untuk digantikan oleh sesuatu yang jauh lebih baik - pengesanan ciri.
[...] pengesanan ciri tidak boleh dipercayai sepenuhnya sama ada - ada kalanya ia gagal.
- James Edwards
Memilih Modernizr untuk memotong mustard mungkin tidak cekap (kerana ia memerlukan pemprosesan dan pemprosesan pelanggan), tetapi secara manual mengesan sokongan Flex-Wrap bukanlah tugas yang mudah. Ia juga penting untuk diperhatikan bahawa walaupun Modernizr versi 2 tidak mengesan Flex-Wrap, versi 3 tidak! Ciri ini dilabelkan sebagai pembalut garis flex.
Walaupun pilihan ada untuk menggunakan kelas CSS yang dilampirkan pada akar dokumen yang dihasilkan oleh Modernizr (mis.: Html.flexwrap), lebih baik untuk menyampaikan fail CSS yang berasingan untuk setiap pengalaman untuk mengurangkan saiz muat turun tapak.
Pemaju Berita BBC merujuk kepada dua jenis pelayar:Rasional ini sangat sah apabila anda menganggap iklim landskap penyemak imbas pada tahun 2012; Walau bagaimanapun, ciri -ciri baru tersedia, bahagian ini tidak semestinya jelas. Sebagai contoh, Flexbox tidak disokong sepenuhnya dalam semua pelayar "HTML5".Seseorang dalam pasukan mula merujuk kepada mereka sebagai "pelayar HTML4" dan "pelayar HTML5", yang kami dapati lebih mudah untuk menyampaikan sentimen kepada orang bukan teknikal.
-BBC Responsive News
Pendekatan yang mantap adalah untuk membezakan antara versi penyemak imbas "warisan" dan "moden". Di samping itu, beberapa projek mungkin memerlukan pelbagai bahagian di mana pelayar separuh jalan (atau "peralihan") dapat dikenalpasti.
Melaksanakan pendekatan
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> class<span>="no-js"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Cutting the mustard<span><span></title</span>></span> </span> <span><span><span><script</span> src<span>="javascripts/dependencies.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><noscript</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="stylesheets/legacy.css"</span>></span> </span> <span><span><span></noscript</span>></span> </span> <span><!-- ... --> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><div</span> class<span>="container"</span>></span> </span> <span><span><span><div</span> class<span>="cell cell-1"</span>></span>Cell 1<span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="cell cell-2"</span>></span>Cell 2<span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="cell cell-3"</span>></span>Cell 3<span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="cell cell-4"</span>></span>Cell 4<span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
Anda juga dapat melihat bahawa tag skrip berada di bahagian atas halaman HTML. Ini kerana Modernizr harus memproses dan menyuntik stylesheet sebelum cat pelayar buat kali pertama. Ini mengurangkan mengecat semula dan membantu mengelakkan kilat kandungan yang tidak terkawal (fouc). Tetapi ingat bahawa kebanyakan tag skrip akan berada di bahagian bawah halaman.
fail warisan.css kami akan mengandungi perkara berikut:
<span><span>.container</span> {
</span><span>}
</span>
<span>/* clearfix */
</span><span><span>.container:after</span> {
</span> <span>content: "";
</span> <span>display: table;
</span> <span>clear: both;
</span><span>}
</span>
<span><span>.cell</span> {
</span> <span>width: 50%;
</span> <span>float: left;
</span><span>}
</span>
<span>/* wrapping */
</span><span><span>.cell:nth-child(<span>2n+1</span>)</span> {
</span> <span>clear: left;
</span><span>}
</span>
<span>/* for visiblity */
</span><span><span>.cell-1</span> { background-color: #000; color: #fff; }
</span><span><span>.cell-2</span> { background-color: #666; color: #fff; }
</span><span><span>.cell-3</span> { background-color: #ccc; color: #000; }
</span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>Seterusnya, fail moden.css kami:
<span><span>.container</span> {
</span> <span>/* Internet Explorer 10
</span><span> */
</span> <span>display: -ms-flexbox;
</span> <span>-ms-flex-wrap: wrap;
</span>
<span>/* Chrome 21-28
</span><span> * Safari 6.1+
</span><span> * Opera 15-16
</span><span> * iOS 7.0+
</span><span> */
</span> <span>display: -webkit-flex;
</span> <span>-webkit-flex-wrap: wrap;
</span>
<span>/* Chrome 29+
</span><span> * Firefox 28+
</span><span> * Internet Explorer 11+
</span><span> * Opera 12.1 & 17+
</span><span> * Android 4.4+
</span><span> */
</span> <span>display: flex;
</span> <span>flex-wrap: wrap;
</span><span>}
</span>
<span><span>.cell</span> {
</span> <span>-webkit-flex: 1 0 50%;
</span> <span>-ms-flex: 1 0 50%;
</span> <span>flex: 1 0 50%;
</span><span>}
</span>
<span>/* for visiblity */
</span><span><span>.cell-1</span> { background-color: #000; color: #fff; }
</span><span><span>.cell-2</span> { background-color: #666; color: #fff; }
</span><span><span>.cell-3</span> { background-color: #ccc; color: #000; }
</span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>Seterusnya kita akan menulis kod untuk dependencies.js.
Seperti yang disebutkan, kita perlu menghasilkan versi Modernizr (versi 3) yang mengesan sokongan harta Flex-Wrap. Sertakan kod di bahagian atas fail JavaScript.
<span>/* Include Modernizr v3 with 'Flex line wrapping' here */
</span>
<span>(function() {
</span> <span>var isModern = Modernizr.flexwrap;
</span>
<span>var link = document.createElement('link');
</span> link<span>.rel = 'stylesheet';
</span> link<span>.type = 'text/css';
</span> link<span>.href = 'stylesheets/' + (isModern ? 'modern' : 'legacy') + '.css';
</span>
<span>document.getElementsByTagName('head')[0].appendChild(link);
</span><span>})();</span>SASS Solutions
<span>var isModern = Modernizr.flexwrap && 'querySelector' in document;</span>
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> class<span>="no-js"</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span>Cutting the mustard<span><span></title</span>></span> </span> <span><span><span><script</span> src<span>="javascripts/dependencies.js"</span>></span><span><span></script</span>></span> </span> <span><span><span><noscript</span>></span> </span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="stylesheets/legacy.css"</span>></span> </span> <span><span><span></noscript</span>></span> </span> <span><!-- ... --> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><div</span> class<span>="container"</span>></span> </span> <span><span><span><div</span> class<span>="cell cell-1"</span>></span>Cell 1<span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="cell cell-2"</span>></span>Cell 2<span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="cell cell-3"</span>></span>Cell 3<span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="cell cell-4"</span>></span>Cell 4<span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
Penting untuk memahami perbezaan antara Flexbox dan CSS terapung. Pelaksanaan anda tidak akan kelihatan sama dalam setiap pengalaman - tetapi tanggapan peningkatan progresif bermakna ia tidak semestinya perlu.
Sebagai contoh, secara lalai, Flexbox akan meregangkan semua sel pada baris yang sama untuk mempunyai ketinggian yang sama. Oleh itu, jika satu sel adalah 3 baris panjang dan baris bersebelahan adalah 10 baris panjang, latar belakang akan meregangkan kedua -dua sel ke 10 baris. Kejatuhan untuk terapung CSS tidak akan melakukan ini dan kedua -dua sel akan mempunyai ketinggian yang tidak sekata.
Menguji susun atur dalam pelbagai penyemak imbas masih menjadi keperluan, tetapi ingat bahawa memaksa nilai Ismodern kepada False dalam JavaScript dapat membantu penyelesaian Legacy Test dalam mana -mana penyemak imbas:
<span><span>.container</span> {
</span><span>}
</span>
<span>/* clearfix */
</span><span><span>.container:after</span> {
</span> <span>content: "";
</span> <span>display: table;
</span> <span>clear: both;
</span><span>}
</span>
<span><span>.cell</span> {
</span> <span>width: 50%;
</span> <span>float: left;
</span><span>}
</span>
<span>/* wrapping */
</span><span><span>.cell:nth-child(<span>2n+1</span>)</span> {
</span> <span>clear: left;
</span><span>}
</span>
<span>/* for visiblity */
</span><span><span>.cell-1</span> { background-color: #000; color: #fff; }
</span><span><span>.cell-2</span> { background-color: #666; color: #fff; }
</span><span><span>.cell-3</span> { background-color: #ccc; color: #000; }
</span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>Dalam artikel ini, saya telah menyediakan asas -asas untuk menggunakan pengesanan ciri untuk melayani dua stylesheets yang berbeza pada asas kod HTML yang sama. Ini adalah cara yang sangat berkesan untuk memulakan proses peningkatan dari CSS terapung dan mengurangkan kebergantungan pada komen bersyarat IE.
Walaupun terdapat tumpuan yang kuat untuk mengesan sokongan untuk Flexbox, penting untuk diperhatikan bahawa sebagai ciri -ciri baru dibangunkan untuk penyemak imbas, pendekatan ini untuk memotong mustard dapat disesuaikan dan berkembang untuk memenuhi keperluan masa depan.
Setelah Internet Explorer 10 jatuh dari populariti dengan bahagian pasaran penyemak imbas dalam sektor sasaran anda, anda mungkin dapat menenggelamkan sintaks Tweener dan menyampaikan kod leaner semata -mata melalui penggunaan sintaks baru.
jadi sekarang anda mempunyai semua teori, mengapa tidak mendapat kenal dengan Flexbox dalam projek anda yang seterusnya?
Flexbox menawarkan beberapa kelebihan berbanding kaedah susun atur tradisional. Ia membolehkan struktur susun atur yang fleksibel, menjadikannya lebih mudah untuk merancang laman web responsif. Ia juga memudahkan penjajaran, pengedaran, dan pesanan elemen dalam bekas. Dengan Flexbox, anda boleh dengan mudah mencapai susun atur dan penjajaran yang kompleks yang sukar dengan CSS tradisional. proses, terutamanya untuk projek yang besar dan sedia ada. Adalah penting untuk memahami model Flexbox sebelum memulakan penghijrahan. Mulakan dengan bereksperimen dengan susun atur mudah, secara beransur -ansur bergerak ke yang lebih kompleks. Gunakan pendekatan langkah demi langkah, memindahkan satu komponen pada satu masa dan menguji setiap perubahan. > Alat seperti Google Lighthouse, Gtmetrix, dan WebpageTest boleh membantu anda mengenal pasti jika anda melayani JavaScript Legacy untuk pelayar moden. Alat ini menyediakan laporan prestasi terperinci, menonjolkan kawasan di mana prestasi laman web anda dapat diperbaiki. sokongan dalam pelayar yang lebih tua. Walau bagaimanapun, mungkin terdapat beberapa ketidakkonsistenan dan pepijat. Adalah disyorkan untuk menggunakan alat seperti AutoPrefixer, yang boleh menambah awalan vendor yang diperlukan untuk CSS anda, memastikan keserasian dengan pelayar yang lebih tua. Seo. Laman web yang responsif dan cepat menyediakan pengalaman pengguna yang lebih baik, yang merupakan faktor utama dalam SEO. Di samping itu, laman web yang memuat lebih cepat lebih cenderung untuk merangkak dan diindeks oleh enjin carian. Model susun atur baru, berurusan dengan ketidakkonsistenan penyemak imbas, dan memastikan keserasian mundur. Adalah penting untuk menguji laman web anda dengan teliti dalam pelbagai pelayar dan peranti untuk memastikan pengalaman pengguna yang konsisten.
Terdapat banyak sumber dalam talian untuk mengetahui tentang Flexbox dan JavaScript moden. Laman web seperti CSS-Tricks, MDN Web Docs, dan SitePoint menawarkan panduan dan tutorial yang komprehensif. Di samping itu, platform pengekodan dalam talian seperti CodeCademy dan FreeCodeCamp menyediakan pelajaran interaktif mengenai topik ini.
Atas ialah kandungan terperinci Berhijrah ke Flexbox dengan memotong mustard. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Maksud div dalam css
Apakah yang dimaksudkan dengan lebar penuh dan separuh lebar?
Pengenalan kepada kandungan kerja utama jurutera hadapan
Bagaimana untuk membuka fail mobi
Bagaimana untuk menyelesaikan kegagalan dns
Perisian sambungan jauh yang popular
Perbezaan antara counta dan count
Penjelasan terperinci tentang penggunaan fungsi sprintf
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
