Memperkenalkan GSS: Lembaran Gaya Grid-tutorial css-php.cn

Anda mungkin baru -baru ini mendengar Lembaran Gaya Grid (GSS) di dunia HTML dan CSS. GSS membayangkan semula susun atur CSS dan menggantikan enjin susun atur penyemak imbas dengan satu yang memanfaatkan Solver Kekangan Kekangan Introducing GSS: Grid Style Sheets

. Mereka yang tidak memahami perkataan itu ... Halo, dan selamat datang!

Memperkenalkan GSS: Lembaran Gaya Grid GSS menjanjikan masa depan yang lebih baik. GSS menjanjikan kedudukan dan saiz relatif. GSS berjanji untuk memusatkan sebarang elemen di dalam yang lain dengan satu baris kod. Dan GSS menyampaikan. Persoalannya ialah: bagaimana?

Dalam artikel ini, saya akan meliputi sejarah ringkas GSS dan gambaran yang mendalam mengenai ciri-ciri yang ditawarkannya. Saya juga akan melihat GSS untuk susun atur berasaskan kekangan, algoritma kekangan kasar, dan membimbing anda melalui proses memasang dan menggunakan GSS. orang -orang yang lebih suka tidak menunggu untuk W3C atau pelayar untuk mengejar, saya menggesa anda untuk menggantung di sana dan memberi perhatian yang mendalam ketika saya menjelaskan misteri yang GSS. Pada nota itu, mari kita mulakan dengan sedikit sejarah.

Takeaways Key

Untuk mula menggunakan GSS, ia perlu dipasang melalui Bower atau dimuat turun melalui GitHub sebagai fail zip, dan kemudian GSS Stylesheets boleh dimuatkan dengan menambah Type = Text/GSS pada tag

atau menggunakan

Sejarah ringkas

GSS adalah penciptaan grid dengan Dan Tocchini sebagai pengasas dan CEOnya. Jawapan ini mengapa helaian gaya berasaskan grid tidak dipanggil Helaian Gaya Grid. Perang antara pemaju web dan teknologi front-end untuk membentangkan idea-idea ke web telah berlangsung selama bertahun-tahun. CSS telah terbukti berjaya selama sedekad yang lalu. Walau bagaimanapun, membina antara muka pengguna yang semakin kompleks dengan alat yang belum berkembang dengan masa adalah sesuatu yang diharapkan oleh pemaju web secara teratur. Sebagai contoh, vertikal memusatkan elemen dengan CSS bukanlah tugas yang paling mudah, terutamanya dengan unsur ketinggian yang berubah-ubah.

Flexbox adalah salah satu penyelesaian yang paling terkini, tetapi juga perubahan kecil di sana memerlukan anda untuk pergi jauh dalam kandungan HTML anda dan persembahan CSS dan membuat perubahan.

Sudah tiba masanya untuk GSS mengambil arena. GSS menangani masalah ini dan banyak lagi - masalah yang dimiliki oleh pemaju selama lebih dari satu dekad.

Pada dasarnya, GSS adalah preprocessor CSS dan runtime JavaScript yang mengeksploitasi cassowary.js. Mereka yang belum tahu, cassowary.js adalah port JavaScript Apple menggunakan koko autolayout.

Kedua -dua GSS dan Cassowary diasaskan pada pengaturcaraan kekangan, menjadikannya sesuai untuk memperkasakan bahasa deklaratif seperti CSS. Pengaturcaraan kekangan adalah paradigma yang mana pemaju web bimbang dengan mengisytiharkan "apa" dan meninggalkan "bagaimana" sehingga pemecah matematik.

Pengaturcaraan kekangan memberi tumpuan kepada niat, bukan pelaksanaan.

Sekarang bahawa kami telah menubuhkan beberapa maklumat latar belakang, mari kita beralih ke ciri -ciri yang ditawarkan GSS.

Gambaran keseluruhan GSS

Salah satu masalah terbesar dengan CSS adalah relativiti. Anda boleh mengharapkan mana -mana elemen CSS mempunyai senarai sifat yang tidak berkesudahan - padding, ketinggian, lebar, terapung, margin, sempadan, garis besar - tetapi tidak ada maklumat ini memberitahu kami di mana elemen itu akan ditempatkan dengan merujuk kepada unsur -unsur lain di halaman ( atau bahkan halaman secara keseluruhan). Senarai yang tidak berkesudahan juga tidak menjawab di mana elemen akan dipaparkan dengan saiz skrin yang berbeza.

Ini membawa kami kepada ciri pertama GSS: anda menentukan apa yang anda mahukan susun atur. Sudahlah hari-hari menghabiskan banyak jam percubaan dan kesilapan, menyusun bagaimana susun atur harus dibina.

Oleh kerana kita sudah membincangkan bahawa GSS menggunakan cassowary.js, berikut adalah satu lagi ciri hebat GSS: elemen boleh berpusat di dalam mana -mana yang lain dengan satu baris kod. Ini membuat banyak penyelesaian yang tidak perlu dan perkara -perkara masa lalu.

Sebagai contoh, jika anda ingin menambah butang langganan secara menegak dengan, katakan, tajuk di sebelah kanan halaman laman web anda, anda akan menggunakan kod berikut:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Salin selepas log masuk

Ciri lain: GSS membuat terapung, sel meja, ClearFix, dan usang berpusat mendatar/menegak. Tawaran selamat tinggal kepada perangkap berbahaya yang terapung kerana kami mempunyai W3C sendiri mengatakan bahawa terapung tidak sesuai untuk susun atur permohonan.

"Sebagai laman web berkembang dari dokumen mudah ke dalam aplikasi kompleks, interaktif, alat untuk susun atur dokumen, mis. Terapung, tidak semestinya sesuai untuk susun atur permohonan. "
- Modul susun atur grid W3C (draf kerja)

bagaimana dengan ciri -ciri CSS seperti! Penting? Ciri keempat GSS melakukan sesuatu yang serupa: GSS menggunakan hierarki kekangan untuk mengutamakan kekangan dengan kekuatan. Kami bercakap mengenai empat tahap kekuatan terbina dalam di sini:

Perhatikan bahawa memerlukan adalah

khas kekuatan yang memastikan bahawa kekangan akan memegang dan jika ia tidak maka semuanya pecah. Adalah dinasihatkan untuk menggunakannya dengan teliti dan jarang sekali.

Tahap kekuatan meningkatkan senarai dan kekangan yang lebih kuat diberi keutamaan yang lebih tinggi semasa pelaksanaan. Mari kita lihat contoh:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Salin selepas log masuk

Anda telah membuatnya sejauh ini, mari kita lihat beberapa susun atur berasaskan kekangan sekarang.

GSS untuk susun atur berasaskan kekangan

Kekangan pada dasarnya adalah hubungan antara dua atau lebih pembolehubah yang mungkin atau tidak boleh dipegang. Semua sifat angka unsur -unsur layak dikekang. Berikut adalah contoh:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Salin selepas log masuk

p dipanggil pemilih
ketinggian garis adalah harta yang GSS akan mengira nilai untuk
[] digunakan untuk mengakses harta
= menentukan kekangan ketidaksamaan
10 dan 20 adalah nilai berangka dalam piksel

Dalam contoh yang diberikan di atas, kedua -dua kekangan memegang sah. Berikut adalah contoh kekangan yang tidak dipegang.

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Salin selepas log masuk

Pada mulanya, kedua -dua elemen Elementa dan ElementB dikekang mempunyai ketinggian 150px. Dalam baris ketiga, jumlah kedua -dua elemen adalah 225px. Oleh itu, salah satu daripada kekangan elemen tidak akan dipegang.

pemilih dalam GSS

pemilih dalam GSS adalah pertanyaan di atas sekumpulan elemen HTML dan mereka digunakan untuk menentukan unsur -unsur yang akhirnya akan dipengaruhi oleh kekangan. Pemilih adalah penting kerana anda perlu memilih dan memerhatikan unsur -unsur dari DOM sebelum anda menggunakan kekangan kepada mereka.

Pemilih asas berikut disokong oleh GSS.

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Salin selepas log masuk

peraturan dalam GSS

peraturan akan membolehkan anda menentukan pelbagai kekangan ke atas pemilih tunggal. Anda boleh bersarang dan menggunakan sifat CSS di dalamnya juga.

peraturan bersarang ini:

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

Salin selepas log masuk

sama seperti:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Salin selepas log masuk

sifat dalam GSS

Saya telah meliputi sifat -sifat dalam contoh -contoh di atas tetapi mari kita lihat mereka sedikit lebih dekat. Dalam GSS, sifat adalah pembolehubah yang tergolong dalam elemen. Apabila kita menggunakan sifat-sifat yang dikenali oleh CSS, nilai yang dikira GSS yang sepadan diberikan sebagai gaya inline pada elemen.

sesuatu seperti ini:

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

Salin selepas log masuk

akan sama dengan:

<span>(section < article .aclass)[height] == 150;</span>

Salin selepas log masuk

Pengenalan kepada Algoritma Kekangan Cassowary

GSS menggunakan port JavaScript (cassowary.js) dari algoritma penyelesaian aritmetik linear cassowary oleh Badros, Borning dan Stuckey, 1999.

Pengguna tidak dikehendaki memastikan bahawa kekangan input tidak bertentangan dengan satu sama lain. Malah, ini adalah intipati algoritma cassowary; Ia secara bertahap menilai kekangan dan mendapati penyelesaian optimum secara automatik.

Keterbatasan pengiraan algoritma cassowary

Solver Kekangan di belakang GSS dipanggil algoritma Cassowary. Algoritma ini hanya boleh mengira kekangan yang linear (iaitu bentuk y = mx c). Pengendali asas (, -, *, /) disokong oleh algoritma. Pendaraban dan pembahagian dua (atau lebih) pemboleh ubah terkawal tidak linear dan oleh itu, akan membuang kesilapan.

<span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

Salin selepas log masuk

Memasang GSS

Untuk pemasangan sisi klien, pasang melalui Bower:

<span><span>.container</span> {
</span>  &[height] == #elm[height]<span>;
</span><span>}</span>

Salin selepas log masuk

kemudian tambahkan kod ini ke bahagian

markup anda:

<span>/* this expression is not linear */
</span>#elementa[height] <span>* #elementb[width] == newElement;</span>

Salin selepas log masuk

anda juga boleh memuat turun versi 2.0.0 melalui github sebagai fail zip.

Sebaik sahaja anda memasang GSS, muatkan stylesheets anda.

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Salin selepas log masuk

atau menggunakan elemen :

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Salin selepas log masuk

Sebaik sahaja anda mempunyai segala -galanya dan berjalan, anda boleh mula mengikuti bersama -sama dengan beberapa contoh kod. Di bawah ini saya akan menjalani tutorial pemula.

tutorial pemula GSS

Contoh -contoh yang akan saya buat akan dipaparkan melalui Codepen tetapi saya akan melalui tutorial seperti dokumen HTML standard. Pertama saya akan menambah baris kod berikut ke HTML saya untuk menambah skrip enjin GSS:

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Salin selepas log masuk

Saya akan menggunakan versi file yang dihoskan codepen, tetapi anda boleh mencari versi CDN yang dihoskan di sini. Seterusnya saya akan menambah kod berikut di bawah skrip rujukan GSS (baris yang saya tambahkan di atas) untuk lulus GSS objek dokumen.

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

Salin selepas log masuk

Jika anda lebih suka, ini boleh diletakkan dalam fail JavaScript yang berasingan yang dimasukkan selepas skrip enjin.

Contoh 1: Vertikal memusatkan elemen

Saya akan membuat div dan melampirkan beberapa teks dalam tag H2 dalam susun atur GSS dan tambahkan ini ke HTML:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Salin selepas log masuk

Selepas menambah beberapa gaya asas, saya dapat menambah beberapa GSS untuk membuat susun atur. Di sinilah keseronokan bermula.

Matlamat saya adalah untuk secara menegak memusatkan elemen .foo di dalam viewport, walaupun saiznya, dan dapat mengekalkan penjajaran yang sama walaupun saiz unsur berubah.

Berikut adalah kekangan yang saya akan memohon untuk mencapai matlamat ini:

blok diperlukan untuk menentukan GSS yang akan saya tambah. Saya akan meletakkan elemen di tengah -tengah skrin dengan menambahkan kod berikut di dalam tag :

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

Salin selepas log masuk

Dan itu semua yang diperlukan. Unsur ini kini berpusat (dengan ketinggian dinamik) secara menegak menggunakan GSS. Berikut adalah demo:

<span>(section < article .aclass)[height] == 150;</span>

Salin selepas log masuk

lihat penatan menegak pen dengan GSS oleh SitePoint (@SitePoint) pada codepen.

Cuba demo skrin penuh dan cuba saiz semula penyemak imbas secara menegak untuk melihat elemen tetap berpusat pada mana -mana saiz tetingkap.

Contoh 2: Putaran elemen berdasarkan lebar tetingkap yang berubah secara dinamik

Untuk contoh seterusnya, saya akan membuat bentuk persegi berwarna yang mudah dan memusingkannya secara dinamik. Pertama mari boot GSS dengan menambahkan baris kod berikut di bahagian dokumen:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Salin selepas log masuk

Perhatikan bahawa anda perlu mengedit kod di atas untuk menunjuk ke lokasi yang betul untuk fail. Anda boleh mendapatkan fail Worker.js di sini, dan fail GSS.JS di sini.

Nota: Oleh kerana beberapa pepijat, laluan fail di atas menunjuk ke versi pra-2.0.0 GSS untuk mendapatkan ini berfungsi.

Sekarang mari kita buat bentuk persegi dengan menambahkan ini ke HTML:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Salin selepas log masuk

... dan tambahkan beberapa gaya di CSS:

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Salin selepas log masuk

Sekarang saya akan kembali ke HTML dan menambah beberapa kekangan GSS.

Perlu diingat bahawa dengan GSS, anda hanya membuat niat dan meninggalkan pengiraan matematik sehingga algoritma. Dalam contoh ini, saya cuba membuat kekangan antara elemen dan tetingkap yang mana putaran dihasilkan dalam elemen apabila lebar tetingkap berubah secara dinamik.

Berikut adalah kekangan yang saya akan memohon untuk mencapai matlamat ini:

Gunakan pemilih :: tetingkap [pusat] untuk memusatkan elemen ini bahagian yang kelihatan dari halaman dalam penyemak imbas.
gunakan :: window [lebar] Untuk membuat kekangan dengan putar-Z, yang akan menghasilkan kesan putaran pada elemen di sekitar paksi z. Di sini, nilai yang diterima dari :: window [lebar] mewakili tahap putaran.

Saya akan menambah blok gaya ke HTML dengan jenis set ke teks/GSS, seperti yang saya lakukan dalam contoh pertama. Ingat bahawa blok gaya diperlukan untuk menentukan GSS yang akan saya tambah.

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

Salin selepas log masuk

Saya akan mengaitkan kotak persegi dengan skrin menggunakan GSS mengekang dengan menambahkan kod berikut di dalam tag gaya:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Salin selepas log masuk

Dan dengan itu, ia dilakukan. Lihat demo Codepen akhir:

Lihat putaran dinamik pena menggunakan GSS oleh SitePoint (@SitePoint) pada codepen.

Jika anda melihat demo skrin penuh, cuba saiz semula tetingkap. Anda akan melihat bahawa kotak persegi akan menukar kedudukan putarannya apabila lebar tetingkap diubah.

Masa Depan GSS

Masa depan GSS kelihatan menjanjikan. Sudah tiba masanya kami bergerak ke hadapan dengan teknologi front-end. Saya cadangkan anda berlatih pada prototaip skala yang lebih kecil sebelum anda merobek seluruh perpustakaan stylesheet anda.

Apa yang saya tutupi di sini hanyalah contoh kecil dari apa yang boleh anda lakukan dengan GSS, tetapi saya harap anda dapati tutorial ini berguna dan bermaklumat untuk memulakan anda.

Adakah anda sudah menggunakan GSS? Bagaimana pengalaman anda? Beritahu saya di bahagian komen.

Soalan Lazim mengenai GSS (Lembaran Gaya Grid)

Apakah GSS (Lembaran Gaya Grid)? Ia adalah enjin susun atur berasaskan kekangan yang membolehkan anda membuat susun atur yang responsif dan fleksibel menggunakan sintaks mudah dan intuitif. GSS memanjangkan model CSS tradisional dengan memperkenalkan konsep kekangan, yang membolehkan anda menentukan hubungan antara unsur -unsur dan mengawal tingkah laku mereka dengan cara yang lebih tepat dan fleksibel.

CSS tradisional menggunakan model kotak untuk susun atur, yang boleh mengehadkan dan kompleks apabila membuat susun atur kompleks. Sebaliknya, GSS menggunakan model berasaskan kekangan, yang membolehkan lebih banyak fleksibiliti dan ketepatan. Dengan GSS, anda boleh menentukan hubungan antara unsur -unsur dan mengawal tingkah laku mereka dengan cara yang lebih intuitif. dalam projek anda. Ini boleh dilakukan dengan memuat turun perpustakaan GSS dari laman web rasmi atau dengan menggunakan pengurus pakej seperti NPM. Sebaik sahaja enjin GSS dimasukkan ke dalam projek anda, anda boleh mula menulis kod GSS dalam fail CSS anda. bersama CSS tradisional. Ini bermakna anda secara beransur -ansur boleh memperkenalkan GSS ke dalam projek anda tanpa perlu menulis semula kod CSS anda yang sedia ada. Kod GSS boleh ditulis dalam fail berasingan atau dicampur dengan kod CSS biasa.

Apakah faedah menggunakan GSS? Ia membolehkan kawalan yang lebih tepat terhadap susun atur, menjadikannya lebih mudah untuk mewujudkan reka bentuk yang kompleks dan responsif. GSS juga memudahkan kod, menjadikannya lebih mudah untuk dibaca dan diselenggarakan. Di samping itu, GSS menyokong penyuntingan langsung, yang bermaksud anda dapat melihat perubahan dalam masa nyata semasa kod.

Adakah GSS disokong oleh semua pelayar? enjin, yang bermaksud ia harus berfungsi dalam mana -mana pelayar moden yang menyokong JavaScript. Walau bagaimanapun, seperti mana -mana teknologi baru, ia sentiasa merupakan idea yang baik untuk menguji reka bentuk anda dalam pelbagai pelayar untuk memastikan keserasian. Sumber yang tersedia untuk belajar GSS. Laman web rasmi GSS menyediakan panduan dan dokumentasi yang komprehensif. Terdapat juga beberapa tutorial dan kursus dalam talian yang tersedia yang meliputi GSS secara mendalam. Enjin susun atur berasaskan kekangan membolehkan reka bentuk responsif yang menyesuaikan diri dengan saiz dan orientasi skrin yang berbeza. Ini menjadikannya lebih mudah untuk mencipta pengalaman pengguna yang konsisten di seluruh peranti yang berbeza.

Adakah sumber terbuka GSS?

Ya, GSS adalah projek sumber terbuka. Ini bermakna sesiapa sahaja boleh menyumbang kepada pembangunannya dan menggunakannya secara percuma dalam projek mereka. Kod sumber untuk GSS boleh didapati di GitHub. Walau bagaimanapun, ciri-ciri yang kuat dan minat yang semakin meningkat dalam susun atur berasaskan kekangan menunjukkan bahawa ia mempunyai masa depan yang menjanjikan. Memandangkan lebih banyak pemaju mengamalkan GSS, kita boleh mengharapkan untuk melihat lebih banyak sumber, alat, dan sokongan komuniti untuk teknologi inovatif ini.

Lembaran Gaya Grid (GSS) adalah preprocessor CSS dan runtime JavaScript yang menggantikan enjin susun atur penyemak imbas dengan pemecah kekangan kasar, kedudukan dan saiz relatif yang menjanjikan dan keupayaan untuk memusatkan sebarang elemen di dalam yang lain dengan satu baris kod.

GSS menggunakan pengaturcaraan kekangan, yang memberi tumpuan kepada niat dan bukannya pelaksanaan, yang membolehkan pemaju mengisytiharkan "apa" dan meninggalkan "bagaimana" sehingga pemecah matematik.

atau menggunakan
GSS adalah penciptaan grid dengan Dan Tocchini sebagai pengasas dan CEOnya. Jawapan ini mengapa helaian gaya berasaskan grid tidak dipanggil Helaian Gaya Grid.

Flexbox adalah salah satu penyelesaian yang paling terkini, tetapi juga perubahan kecil di sana memerlukan anda untuk pergi jauh dalam kandungan HTML anda dan persembahan CSS dan membuat perubahan.

Sudah tiba masanya untuk GSS mengambil arena. GSS menangani masalah ini dan banyak lagi - masalah yang dimiliki oleh pemaju selama lebih dari satu dekad.

Pada dasarnya, GSS adalah preprocessor CSS dan runtime JavaScript yang mengeksploitasi cassowary.js. Mereka yang belum tahu, cassowary.js adalah port JavaScript Apple menggunakan koko autolayout.

Kedua -dua GSS dan Cassowary diasaskan pada pengaturcaraan kekangan, menjadikannya sesuai untuk memperkasakan bahasa deklaratif seperti CSS. Pengaturcaraan kekangan adalah paradigma yang mana pemaju web bimbang dengan mengisytiharkan "apa" dan meninggalkan "bagaimana" sehingga pemecah matematik.

Pengaturcaraan kekangan memberi tumpuan kepada niat, bukan pelaksanaan.

Sekarang bahawa kami telah menubuhkan beberapa maklumat latar belakang, mari kita beralih ke ciri -ciri yang ditawarkan GSS.

Gambaran keseluruhan GSS

Sebagai contoh, jika anda ingin menambah butang langganan secara menegak dengan, katakan, tajuk di sebelah kanan halaman laman web anda, anda akan menggunakan kod berikut:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Salin selepas log masuk

"Sebagai laman web berkembang dari dokumen mudah ke dalam aplikasi kompleks, interaktif, alat untuk susun atur dokumen, mis. Terapung, tidak semestinya sesuai untuk susun atur permohonan. "
- Modul susun atur grid W3C (draf kerja)

Perhatikan bahawa memerlukan adalah

khas kekuatan yang memastikan bahawa kekangan akan memegang dan jika ia tidak maka semuanya pecah. Adalah dinasihatkan untuk menggunakannya dengan teliti dan jarang sekali.

Tahap kekuatan meningkatkan senarai dan kekangan yang lebih kuat diberi keutamaan yang lebih tinggi semasa pelaksanaan. Mari kita lihat contoh:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Salin selepas log masuk

Anda telah membuatnya sejauh ini, mari kita lihat beberapa susun atur berasaskan kekangan sekarang.

GSS untuk susun atur berasaskan kekangan

Kekangan pada dasarnya adalah hubungan antara dua atau lebih pembolehubah yang mungkin atau tidak boleh dipegang. Semua sifat angka unsur -unsur layak dikekang. Berikut adalah contoh:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Salin selepas log masuk

p dipanggil pemilih
ketinggian garis adalah harta yang GSS akan mengira nilai untuk
[] digunakan untuk mengakses harta
= menentukan kekangan ketidaksamaan
10 dan 20 adalah nilai berangka dalam piksel

Dalam contoh yang diberikan di atas, kedua -dua kekangan memegang sah. Berikut adalah contoh kekangan yang tidak dipegang.

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Salin selepas log masuk

pemilih dalam GSS

Pemilih asas berikut disokong oleh GSS.

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

Salin selepas log masuk

peraturan dalam GSS

peraturan akan membolehkan anda menentukan pelbagai kekangan ke atas pemilih tunggal. Anda boleh bersarang dan menggunakan sifat CSS di dalamnya juga.

peraturan bersarang ini:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Salin selepas log masuk

sama seperti:

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

Salin selepas log masuk

sifat dalam GSS

sesuatu seperti ini:

<span>(section < article .aclass)[height] == 150;</span>

Salin selepas log masuk

akan sama dengan:

<span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

Salin selepas log masuk

Pengenalan kepada Algoritma Kekangan Cassowary

GSS menggunakan port JavaScript (cassowary.js) dari algoritma penyelesaian aritmetik linear cassowary oleh Badros, Borning dan Stuckey, 1999.

Keterbatasan pengiraan algoritma cassowary

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Salin selepas log masuk

Memasang GSS

Untuk pemasangan sisi klien, pasang melalui Bower:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Salin selepas log masuk

kemudian tambahkan kod ini ke bahagian

markup anda:

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Salin selepas log masuk

anda juga boleh memuat turun versi 2.0.0 melalui github sebagai fail zip.

Sebaik sahaja anda memasang GSS, muatkan stylesheets anda.

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

Salin selepas log masuk

atau menggunakan elemen :

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Salin selepas log masuk

Sebaik sahaja anda mempunyai segala -galanya dan berjalan, anda boleh mula mengikuti bersama -sama dengan beberapa contoh kod. Di bawah ini saya akan menjalani tutorial pemula.

tutorial pemula GSS

<span>section < article {
</span>  <span><span>.aclass</span> {
</span>    <span>height: == 150;
</span>  <span>}
</span><span>}</span>

Salin selepas log masuk

<span>(section < article .aclass)[height] == 150;</span>

Salin selepas log masuk

Jika anda lebih suka, ini boleh diletakkan dalam fail JavaScript yang berasingan yang dimasukkan selepas skrip enjin.

Contoh 1: Vertikal memusatkan elemen

Saya akan membuat div dan melampirkan beberapa teks dalam tag H2 dalam susun atur GSS dan tambahkan ini ke HTML:

<span><span>.container</span> {
</span>  <span>height: == #elm[height];
</span><span>}</span>

Salin selepas log masuk

Selepas menambah beberapa gaya asas, saya dapat menambah beberapa GSS untuk membuat susun atur. Di sinilah keseronokan bermula.

Matlamat saya adalah untuk secara menegak memusatkan elemen .foo di dalam viewport, walaupun saiznya, dan dapat mengekalkan penjajaran yang sama walaupun saiz unsur berubah.

Berikut adalah kekangan yang saya akan memohon untuk mencapai matlamat ini:

blok diperlukan untuk menentukan GSS yang akan saya tambah. Saya akan meletakkan elemen di tengah -tengah skrin dengan menambahkan kod berikut di dalam tag :

<span><span>.container</span> {
</span>  &[height] == #elm[height]<span>;
</span><span>}</span>

Salin selepas log masuk

Dan itu semua yang diperlukan. Unsur ini kini berpusat (dengan ketinggian dinamik) secara menegak menggunakan GSS. Berikut adalah demo:

lihat penatan menegak pen dengan GSS oleh SitePoint (@SitePoint) pada codepen.

Cuba demo skrin penuh dan cuba saiz semula penyemak imbas secara menegak untuk melihat elemen tetap berpusat pada mana -mana saiz tetingkap.

Contoh 2: Putaran elemen berdasarkan lebar tetingkap yang berubah secara dinamik

Untuk contoh seterusnya, saya akan membuat bentuk persegi berwarna yang mudah dan memusingkannya secara dinamik. Pertama mari boot GSS dengan menambahkan baris kod berikut di bahagian

dokumen:

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

Salin selepas log masuk

Perhatikan bahawa anda perlu mengedit kod di atas untuk menunjuk ke lokasi yang betul untuk fail. Anda boleh mendapatkan fail Worker.js di sini, dan fail GSS.JS di sini.

Nota: Oleh kerana beberapa pepijat, laluan fail di atas menunjuk ke versi pra-2.0.0 GSS untuk mendapatkan ini berfungsi.

Sekarang mari kita buat bentuk persegi dengan menambahkan ini ke HTML:

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

Salin selepas log masuk

... dan tambahkan beberapa gaya di CSS:

p[line-height] >= <span>10;
</span>p[line-height] <= <span>::window[height] / 20;</span>

Salin selepas log masuk

Sekarang saya akan kembali ke HTML dan menambah beberapa kekangan GSS.

Berikut adalah kekangan yang saya akan memohon untuk mencapai matlamat ini:

Gunakan pemilih :: tetingkap [pusat] untuk memusatkan elemen ini bahagian yang kelihatan dari halaman dalam penyemak imbas.
gunakan :: window [lebar] Untuk membuat kekangan dengan putar-Z, yang akan menghasilkan kesan putaran pada elemen di sekitar paksi z. Di sini, nilai yang diterima dari :: window [lebar] mewakili tahap putaran.

Saya akan menambah blok gaya ke HTML dengan jenis set ke teks/GSS, seperti yang saya lakukan dalam contoh pertama. Ingat bahawa blok gaya diperlukan untuk menentukan GSS yang akan saya tambah.

#elementa[height] == <span>150;
</span>#elementb[height] == <span>150;
</span>#elementa[height] <span>+ #elementb[height] == 225;</span>

Salin selepas log masuk

Saya akan mengaitkan kotak persegi dengan skrin menggunakan GSS mengekang dengan menambahkan kod berikut di dalam tag gaya:

#elementID[height] == <span>150;   /* id      */
</span>div[height] == <span>150;         /* element */
</span>.className[height] == <span>150; /* class   */</span>

Salin selepas log masuk

Dan dengan itu, ia dilakukan. Lihat demo Codepen akhir:

Lihat putaran dinamik pena menggunakan GSS oleh SitePoint (@SitePoint) pada codepen.

Jika anda melihat demo skrin penuh, cuba saiz semula tetingkap. Anda akan melihat bahawa kotak persegi akan menukar kedudukan putarannya apabila lebar tetingkap diubah.

Masa Depan GSS

Apa yang saya tutupi di sini hanyalah contoh kecil dari apa yang boleh anda lakukan dengan GSS, tetapi saya harap anda dapati tutorial ini berguna dan bermaklumat untuk memulakan anda.

Adakah anda sudah menggunakan GSS? Bagaimana pengalaman anda? Beritahu saya di bahagian komen.

Soalan Lazim mengenai GSS (Lembaran Gaya Grid)

Apakah GSS (Lembaran Gaya Grid)?
GSS, atau helaian gaya grid, adalah alat yang berkuasa untuk pemaju web dan pereka. Ia adalah enjin susun atur berasaskan kekangan yang membolehkan anda membuat susun atur yang responsif dan fleksibel menggunakan sintaks mudah dan intuitif. GSS memanjangkan model CSS tradisional dengan memperkenalkan konsep kekangan, yang membolehkan anda menentukan hubungan antara unsur -unsur dan mengawal tingkah laku mereka dengan cara yang lebih tepat dan fleksibel.
CSS tradisional menggunakan model kotak untuk susun atur, yang boleh mengehadkan dan kompleks apabila membuat susun atur kompleks. Sebaliknya, GSS menggunakan model berasaskan kekangan, yang membolehkan lebih banyak fleksibiliti dan ketepatan. Dengan GSS, anda boleh menentukan hubungan antara unsur -unsur dan mengawal tingkah laku mereka dengan cara yang lebih intuitif. bagaimana saya boleh mula menggunakan GSS?
Untuk mula menggunakan GSS, anda perlu memasukkan enjin GSS dalam projek anda. Ini boleh dilakukan dengan memuat turun perpustakaan GSS dari laman web rasmi atau dengan menggunakan pengurus pakej seperti NPM. Sebaik sahaja enjin GSS dimasukkan ke dalam projek anda, anda boleh mula menulis kod GSS dalam fail CSS anda.
Bolehkah saya menggunakan GSS dengan kod CSS saya yang sedia ada?
Ya, GSS direka untuk bekerja bersama CSS tradisional. Ini bermakna anda secara beransur -ansur boleh memperkenalkan GSS ke dalam projek anda tanpa perlu menulis semula kod CSS anda yang sedia ada. Kod GSS boleh ditulis dalam fail berasingan atau dicampur dengan kod CSS biasa.
Apakah faedah menggunakan GSS?
GSS menawarkan beberapa faedah ke atas CSS tradisional. Ia membolehkan kawalan yang lebih tepat terhadap susun atur, menjadikannya lebih mudah untuk mewujudkan reka bentuk yang kompleks dan responsif. GSS juga memudahkan kod, menjadikannya lebih mudah untuk dibaca dan diselenggarakan. Di samping itu, GSS menyokong penyuntingan langsung, yang bermaksud anda dapat melihat perubahan dalam masa nyata semasa anda kod.
Adakah GSS disokong oleh semua pelayar?
GSS menggunakan JavaScript untuk melaksanakan enjin susun atur berasaskan kekangan, yang bermaksud ia harus berfungsi dalam pelayar moden yang menyokong JavaScript. Walau bagaimanapun, seperti mana -mana teknologi baru, ia sentiasa merupakan idea yang baik untuk menguji reka bentuk anda dalam pelbagai pelayar untuk memastikan keserasian.
Adakah terdapat sumber yang tersedia untuk belajar GSS?
Ya, terdapat beberapa sumber yang tersedia untuk belajar GSS. Laman web rasmi GSS menyediakan panduan dan dokumentasi yang komprehensif. Terdapat juga beberapa tutorial dan kursus dalam talian yang tersedia yang meliputi GSS secara mendalam.
Bolehkah GSS digunakan untuk pembangunan web mudah alih?
Ya, GSS adalah alat yang sangat baik untuk pembangunan web mudah alih. Enjin susun atur berasaskan kekangan membolehkan reka bentuk responsif yang menyesuaikan diri dengan saiz dan orientasi skrin yang berbeza. Ini menjadikannya lebih mudah untuk mewujudkan pengalaman pengguna yang konsisten di seluruh peranti yang berbeza.
Adakah sumber terbuka GSS?
Ya, GSS adalah projek sumber terbuka. Ini bermakna sesiapa sahaja boleh menyumbang kepada pembangunannya dan menggunakannya secara percuma dalam projek mereka. Kod sumber untuk GSS boleh didapati di GitHub.
Apakah masa depan GSS?
Sebagai teknologi yang agak baru, GSS masih berkembang. Walau bagaimanapun, ciri-ciri yang kuat dan minat yang semakin meningkat dalam susun atur berasaskan kekangan menunjukkan bahawa ia mempunyai masa depan yang menjanjikan. Memandangkan lebih banyak pemaju mengamalkan GSS, kita boleh mengharapkan untuk melihat lebih banyak sumber, alat, dan sokongan komuniti untuk teknologi inovatif ini.

Atas ialah kandungan terperinci Memperkenalkan GSS: Lembaran Gaya Grid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!