Saya menjadi tertarik pada desain dan pengembangan web di akhir tahun 90an. Sialan, sudah berapa lama. Dan betapa mengerikannya itu. Maksud saya, membuat situs web dan menerbitkannya adalah bisnis yang rumit, dan pelanggan dapat dihitung dengan jari.

Bagi saya, sebagian besar pengembang ingat hari-hari itu, atau setidaknya dekade berikutnya, tetapi tidak. Baru-baru ini saya menemukan tweet , penulis yang terkejut dengan teknik pengaturan sudut bulat sebelum muncul border-radius(buat gambar terpisah untuk setiap sudut bulat dan posisikan dengan tepat). Saya masih ingat bagaimana kami menunggu dengan napas tertahan ketika itu border-radiusmenjadi standar dan awalan di browser dihapus dari itu.

Di sisi lain, banyak yang hanya sedikit mencoba desain web di masa lalu dan percaya bahwa tidak ada yang berubah sejak saat itu.

Artikel ini untuk semua orang. Sejarah CSS dan desain web, seingat saya.

(Harap diingat bahwa ingatan dan penelitian saling terkait erat dalam artikel ini. Oleh karena itu, saya tidak dapat menjamin bahwa semuanya benar-benar ditetapkan dengan benar, terutama dalam hal hubungan sebab dan akibat. Anda dapat membaca riwayat CSS resmi dari W3C , yang jauh lebih pendek, pertandingan yang lebih baik kenyataan dan mengandung kutukan yang jauh lebih sedikit).

(Selain itu, artikel ini akan sangat diuntungkan dengan ilustrasi yang lebih banyak, tetapi hanya menulis teksnya juga memakan waktu lama bagi saya).

Hari pertama

Tidak ada CSS di awal.

Itu sangat buruk.

Artefak favorit saya saat ini adalah buku O'Reilly, yang saya pelajari tentang HTML: The Definitive Guide . Beberapa edisi panduan ini diterbitkan pada pertengahan dan akhir 90-an. Buku ini benar-benar hanya berbicara tentang HTML, tanpa menyebutkan CSS sama sekali. Saya tidak memilikinya lagi dan tidak dapat menemukan pindaian di Internet, tetapi ada halaman dari edisi terbaru buku ini, HTML & XHTML: The Definitive Guide (kami akan membicarakan tentang XHTML nanti). Berikut adalah tips untuk desain web 90-an mutakhir:

"Sorot header dan footer dengan jelas dengan garis horizontal."

Tidak, bukan ituborder-top. Itu<hr>. Judul halaman hampir dipastikan terpusat pada<center>.

Halaman ini memiliki latar belakang standar, font dan warna teks. Sebagian karena panduan ini pertama kali memperkenalkan konsep awal; sebagian karena itu adalah buku hitam dan putih, dan sebagian karena itu mencerminkan kenyataan - untuk mewarnai sesuatu pada halaman itu adalah wasir besar.

Katakanlah Anda ingin membuat semua header berwarna merah. Untuk melakukan ini, letakkan tag berikut:

<H1><FONT COLOR=red>...</FONT></H1>

... untuk setiap judul . Saya harap Anda tidak pernah memutuskan untuk beralih ke biru!

Oh, dan tag HTML dibuat khusus dengan huruf kapital. Saya tidak ingat mengapa kita semua memutuskan itu adalah ide yang bagus. Mungkin ini sebelum penyorotan sintaksis muncul di editor teks (saya berusia 12 tahun dan saya menggunakan Notepad), dan tag heading lebih mudah dibedakan dari teks utama.

Dengan demikian, memelihara situs adalah mimpi buruk yang nyata. Banyak yang memutuskan bahwa lebih mudah untuk tidak menggunakan desain apa pun, hanya pengaturan default. Dalam beberapa hal, itu bahkan menyenangkan: browser memungkinkan Anda untuk mengubah nilai-nilai default ini, sehingga Anda dapat membaca teks di Internet dalam bentuk yang Anda inginkan.

Saya ingat bagaimana solusi alternatif yang menarik muncul di banyak situs Geocities: tampilan yang sama sekali baru untuk setiap halaman web baru. Sialan, kan? Lakukan saja apa yang Anda inginkan di setiap halaman baru.

Mungkin ini adalah puncak dari desain web.

Sial, aku merindukan hari-hari itu. Web yang benar-benar terbuka, tidak ada twitter, tidak ada facebook. Jika Anda memiliki sesuatu untuk dikatakan, Anda harus membuat situs web Anda sendiri. Itu luar biasa. Tidak ada yang tahu apa yang dia lakukan; Saya bertaruh bahwa sebagian besar perancang web pada waktu itu adalah remaja amatir yang bodoh (seperti saya) yang menyalin halaman dari remaja amatir yang bodoh lainnya. Setengah dari Internet adalah portal buatan penggemar tentang animorphs, dengan layar peringatan yang tidak dapat dijelaskan bahwa situs tersebut bekerja paling baik dengan resolusi layar 640x480 (mungkin setiap remaja berusia 12 tahun dengan resolusi layar yang tidak cukup harus membeli monitor baru). Semua pria keren menggunakan Internet Explorer 3 - browser paling canggih. Namun, beberapa pecundang masih duduk di Netscape Navigator, jadi di halaman utama Anda perlu menempatkan GIF animasi "Best in IE".

Itu juga era "warna aman-Internet" - palet 216 warna, di mana setiap saluran menyamai00, 33, 66, 99, ccAtau ff, karena beberapa masih tetap 256-warna monitor! Hari ini kita tidak memikirkannya, menerima begitu saja warna 24-bit.

Bahkan, banyak dari apa yang sekarang kita anggap remeh itu tidak dapat dipahami dan sulit. Ingin navigasi yang sama di setiap halaman situs? Oke, tidak masalah: salin / tempel kode navigasi pada setiap halaman. Jika Anda memperbarui kode ini, pastikan untuk menyegarkan setiap halaman - tetapi kemungkinan besar Anda akan lupa untuk melakukan ini pada beberapa halaman, dan situs tersebut akan terlihat seperti situs arkeologi, dengan beberapa lapis halaman dari “era” yang berbeda.

Jauh lebih mudah menggunakan bingkai.ketika jendela peramban dipecah menjadi kisi-kisi dan halaman terpisah dimuat di setiap sel ... tetapi kemudian orang menjadi bingung jika mereka sampai ke halaman terpisah tanpa bingkai, seperti yang sering terjadi ketika mereka datang dari mesin pencari seperti AltaVista (saya tidak percaya saya menjelaskan frame, tapi tidak ada yang benar-benar digunakan mereka sejak tahun 2001 ... Anda tahu apa iframe adalah? Berikut huruf 'i' berarti inline , yang, built-in frame untuk membedakan mereka dari biasa frame di seluruh layar).

PHP bahkan belum mendapatkan nama itu, dan belum ada yang mendengarnya. Gabungan Perl dan CGI yang aneh ini benar-benar sulit untuk dipahami, dan itu tidak bekerja pada komputer Anda sendiri, kesalahan sulit ditemukan dan didiagnosis, dan Geocities tidak mendukungnya. Jika Anda benar - benar pengembang yang beruntung dan maju, maka host Anda bekerja di server web Apache, dan kemudian Anda dapat menggunakan bahasa rakitan dinamis Server Side Termasuk dan menulis sesuatu seperti ini:

<BODY>
    <TABLE WIDTH=100% BORDER=0 CELLSPACING=8 CELLPADDING=0>
        <TR>
            <TD COLSPAN=2>
                <!--#include virtual="/header.html" --> 
            </TD>
        </TR>
        <TR>
            <TD WIDTH=20%>
                <!--#include virtual="/navigation.html" --> 
            </TD>
            <TD>
                (actual page content goes here)
            </TD>
        </TR>
    </TABLE>
</BODY>

Tidak apa-apa. Apache akan melihat komentar khusus dan memasukkan konten file yang direferensikan. Kerugiannya adalah Anda tidak dapat memeriksa apa pun di komputer Anda, semua navigasi hilang, karena di sini browser web Anda menafsirkan instruksi ini sebagai komentar HTML normal. Tentu saja, menginstal Apache di rumah tidak mungkin, karena Anda memiliki komputer , bukan server .

Sayangnya, semua situs lama telah lama menghilang dan menjadi tertutup oleh abu sejarah, di mana segala sesuatu yang belum dilakukan minggu ini sudah usang dan sudah lama dilupakan. Web seharusnya membuat informasi abadi, tetapi sebaliknya, banyak yang menjadi fana. Saya merindukan saat-saat ketika hampir semua teman saya memiliki situs mereka sendiri. Twitter dan Instagram Anda sebagai kehadiran online adalah pengganti yang buruk.

... Jadi, mari kita lihat situs web Space Jam.

Contoh: Space Jam

Jika Anda tidak tahu, Space Jam adalah film terhebat sepanjang masa. Dia berbicara tentang karier bola basket kelinci Bugs Bunny yang berumur pendek, yang, bersama Michael Jordan yang masih hidup, menyelamatkan planet ini dari semacam ancaman dari alien. Kemudian muncul serangkaian sekuel yang sangat sukses dan sangat lucu untuk film ini.

Dan kami sangat beruntung bahwa 24 tahun setelah diluncurkan, situs Space Jam masih berfungsi ! Di sini dan sekarang kami memiliki kesempatan untuk mempelajari pencapaian desain web terbaik dari model 1996.

Pertama, perhatikan bahwa setiap halaman situs bersifat statis. Dan ini adalah halaman statis dengan ekstensi .htm, bukan.htmlkarena sebelum Windows 95 kami masih terikat dengan nama file 8,3 (delapan karakter untuk nama, tiga karakter untuk ekstensi). Saya tidak tahu mengapa ini penting dalam URL, karena tidak ada yang menjalankan Windows 3.11 di server web, tapi oke.

Berikut ini adalah CSS untuk halaman utama:

<body bgcolor="#000000" background="img/bg_stars.gif" text="#ff0000" link="#ff4c4c" vlink="#ff4c4c" alink="#ff4c4c">

Haha, aku hanya bercanda! Apa jenis CSS? "Cosmic jam" dirilis sebulan lebih awal dari standar ini diterbitkan (pada kenyataannya, ada satu baris dalam kode sumber halaman, tetapi saya yakin itu ditambahkan jauh kemudian untuk menyesuaikan dgn mode beberapa tautan ke aturan yang perlu dimasukkan karena kewajiban hukum).

Perhatikan lokasi hyperlink yang sangat tepat untuk navigasi. Prestasi ini dicapai dengan cara yang sama seperti yang dilakukan semua orang pada tahun 1996: menggunakan tabel.

Bahkan, tabel memiliki satu keunggulan fungsional dibandingkan CSS dalam tata letak, yang sangat penting pada masa itu, karena dengan Ctrl ditekan Anda dapat memilih seltabel atau bahkan beberapa. “Retro-debugger” yang aneh seperti itu menunjukkan bagaimana sel-sel berada di tata letak. Itu hebat karena debugger Firebug normal pertama hanya muncul pada tahun 2006 - satu dekade kemudian!

Markup tabel ini karena alasan yang tidak diketahui diisi dengan baris kosong, tetapi jika Anda menghapusnya, ini terlihat seperti ini:

<table width=500 border=0>
<TR>
<TD colspan=5 align=right valign=top>
</td></tr>
<tr>
<td colspan=2 align=right valign=middle>
<br>
<br>
<br>
<a href="cmp/pressbox/pressboxframes.html"><img src="img/p-pressbox.gif" height=56 width=131 alt="Press Box Shuttle" border=0></a>
</td>
<td align=center valign=middle>
<a href="cmp/jamcentral/jamcentralframes.html"><img src="img/p-jamcentral.gif" height=67 width=55 alt="Jam Central" border=0></a>
</td>
<td align=center valign=top>
<a href="cmp/bball/bballframes.html"><img src="img/p-bball.gif" height=62 width=62 alt="Planet B-Ball" border=0></a>
</td>
<td align=center valign=bottom>
<br>
<br>
<a href="cmp/tunes/tunesframes.html"><img src="img/p-lunartunes.gif" height=77 width=95 alt="Lunar Tunes" border=0></a>
</td>
</tr>
<tr>
<td align=middle valign=top>
<br>
<br>
<a href="cmp/lineup/lineupframes.html"><img src="img/p-lineup.gif" height=52 width=63 alt="The Lineup" border=0></a>
</td>
<td colspan=3 rowspan=2 align=right valign=middle>
<img src="img/p-jamlogo.gif" height=165 width=272 alt="Space Jam" border=0>
</td>
<td align=right valign=bottom>
<a href="cmp/jump/jumpframes.html"><img src="img/p-jump.gif" height=52 width=58 alt="Jump Station" border=0></a>
</td>
</tr>
...
</table>

Ini adalah dua baris pertama, termasuk logo. Anda punya ide. Semuanya diposisikan di dalam sel dengan aligndan valign; sering diterapkan rowspandan colspan, ada sedikit <br>untuk menyesuaikan posisi vertikal pada satu garis, jika perlu.

Artefak fantastis lainnya dapat ditemukan di halaman, termasuk header yang berisi sintaks Apache SSI! Itu pasti telah diam-diam rusak untuk semua orang ketika situs pindah ke hosting selama bertahun-tahun dalam hidupnya. Sekarang di-host di Amazon S3. Anda tahu Amazon? Toko Buku?

<table border=0 cellpadding=0 cellspacing=0 width=488 height=60>
<tr>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234&page.allowcompete=no"--></td>
<td align="center" width="20"></td>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234"--></td>
</tr>
</table>

Oke, lihat halaman Jam Central . Untuk keaslian, saya mengurangi resolusi di browser menjadi 640 × 480 (walaupun untuk perendaman lengkap saya seharusnya telah memesan sedikit lebih banyak ruang vertikal untuk bilah judul, bilah tugas, dan lima hingga enam bilah alat IE).

Perhatikan frame: logo di sudut kiri atas mengarah kembali ke halaman arahan, dengan benar menyimpan tempat di layar agar tidak mengulangi semua navigasi ini, dan di sudut kanan atas ada spanduk iklan sialan yang diblokir dengan tujuh cara berbeda. Ketiga bagian adalah halaman terpisah.

Perhatikan juga teks merah yang benar-benar tidak dapat dibaca pada latar belakang bertekstur, salah satu tanda paling pasti dari desain web tahun 90-an. Anda mungkin bertanya, mengapa tidak menggunakan latar belakang teks biasa? Anda idiot. Bagaimana cara melakukannya? Lagi pula, atributnya backgroundhanya dengan <body>! Anda dapat meletakkan meja, tetapi tabel hanya mendukung latar belakang yang solid, itu akan terlihat membosankan!

Tapi tunggu, apa widget navigasi baru ini? Bagaimana Anda bisa menggantung semua tautan? Meja lain? Ya, tidak, meskipun sering desainer mengisi meja dengan potongan-potongan gambar yang diiris. Tapi di sini kita memiliki imagemap , fungsi HTML yang sudah lama terlupakan. Cukup tunjukkan sumbernya:

<img src="img/m-central.jpg" height=301 width=438 border=0 alt="navigation map" usemap="#map"><br>

<map name="map">
<area shape="rect" coords="33,92,178,136" href="prodnotesframes.html" target="_top">
<area shape="rect" coords="244,111,416,152" href="photosframes.html" target="_top">
<area shape="rect" coords="104,138,229,181" href="filmmakersframes.html" target="_top">
<area shape="rect" coords="230,155,334,197" href="trailerframes.html" target="_top">
</map>

Saya pikir semuanya kurang lebih jelas di sini. Atribut usemapmelampirkan peta gambar, yang didefinisikan sebagai satu set area yang dapat diklik yang dikodekan dengan indah oleh beberapa koordinat.

Dan itu masih berfungsi! Dalam HTML! Anda dapat menggunakannya sekarang juga! Meskipun mungkin tidak.

Kotak Gambar Kecil

Pertimbangkan halaman acak lain. Misalnya, "Foto dari film." (Tunggu, foto ? Saat itu, tidak tahu kata-kata "bingkai" dan "tangkapan layar"? Ya, oke ...)

Satu set bingkai, tetapi disusun secara berbeda.

<body bgcolor="#7714bf" background="img/bg-jamcentral.gif" text="#ffffff" link="#edb2fc" vlink="#edb2fc" alink="#edb2fc">

Di sini, para pengembang melakukan hal yang penting: mereka mengindikasikan tidak hanya gambar latar belakang (buram), tetapi juga warna latar belakang. Jika tidak, teks putih akan keluar dengan latar belakang putih jika gambar latar tidak memuat.

(Perbedaan lain yang menarik dari perkembangan modern. Saat ini, banyak desainer berasumsi bahwa semua sumber daya akan diunduh, dan kadang-kadang mereka menyajikan pengunduhan sebagai beberapa ketidaknyamanan yang perlu diatasi. Tetapi mereka masih tidak duduk di koneksi serat optik dari San Francisco sepuluh meter dari utama saluran).

Tetapi kembali ke halaman itu sendiri. Kisi thumbnail adalah masalah desain web klasik saat itu. Masalah utama adalah Anda ingin menempatkan gambar berdampingan, dan HTML secara default menumpuknya dalam satu kolom besar. Pada saat itu, perancang hanya memiliki satu alat: meja. Di situs kami, ini disusun sebagai berikut:

<table cellpadding=10>
<tr><td align=center><a href="..."><img src="..."></a></td>...</tr>
<tr>...</tr>
<tr>...</tr>
<table>

Kotak thumbnail 3 × 3 diformat atas kebijakan browser (gambar terakhir pada baris terpisah tidak benar-benar bagian dari tabel). Jumlah kolom tidak tergantung pada lebar layar, tetapi pada masa itu setiap orang memiliki layar kecil, jadi ini tidak terlalu mengganggu desainer. Di sini gambar tidak memiliki teks, tetapi karena masing-masing ditempatkan di sel yang terpisah, mereka dapat dengan mudah ditambahkan.

Ini adalah pendekatan tampilan thumbnail paling canggih pada tahun 1996. Kami akan kembali ke puzzle UI kecil ini beberapa kali lagi; Anda dapat melihat contoh nyata (dan kode sumber dengan markup sampel) pada halaman terpisah .

Mari kita lihat ukuran frame “full-size, full-color, kualitas-Internet” dari film demi kepentingan.

Hei, ya mereka kurang dari 16 KB! Gambar ini akan dimuat lebih cepat daripada dalam sembilan detik!

(Saya ingat masalah dengan video yang disematkan, itu tidak dapat diselesaikan sampai tag HTML5 muncul <video>beberapa tahun kemudian. Sampai saat itu, saya harus menggunakan beberapa plug-in berpemilik, dan semuanya mengerikan).

(Ya, omong-omong: bingkai warna ditambahkan ke gambar di dalam tautan secara default. Di sini, keberadaan tautan jelas, sehingga bingkai terlihat berlebihan dan menjengkelkan. Sebelum CSS, mereka harus dinonaktifkan untuk setiap gambar individu menggunakan atribut <img border=0>).

Tata letak yang biasa saat itu

Di situlah kami mulai, dan itu mengisap. Jika Anda ingin gaya umum di lebih dari beberapa halaman, kemungkinan Anda sangat terbatas, dan salin-tempel tetap menjadi satu-satunya alat. Situs web Space Jam memilih untuk tidak khawatir tentang konsistensi desain sama sekali - seperti banyak lainnya.

Lalu datanglah CSS. Itu adalah mukjizat yang nyata . Semua kode ini berulang pada setiap halaman telah menghilang. Ingin membuat semua tajuk utama tingkat atas dari warna tertentu? Tidak masalah:

H1 {
    color: #FF0000;
}

Bam! Dan itu semua. Tidak peduli berapa banyak judul yang ada <h1>di dokumen Anda, masing-masing dari mereka akan menjadi merah, dan Anda tidak akan pernah harus memikirkannya lagi. Bahkan lebih baik: Anda dapat meletakkan fragmen ini di file Anda sendiri dan menerapkan pilihan estetika yang meragukan ini ke setiap halaman situs Anda dengan hampir tanpa usaha! Hal yang sama berlaku untuk latar belakang ubin yang luar biasa, warna tautan, dan ukuran font dalam tabel.

(Ingatlah untuk membungkus konten tag <style>dalam komentar HTML, jika tidak browser lama tanpa dukungan CSS akan menampilkannya sebagai teks).

Tidak perlu menerapkan tag ke semua hal dalam satu baris. CSS memperkenalkan konsep "kelas" dan "ID", sehingga gaya hanya meluas ke elemen yang ditandai khusus. Ketik pemilihP.importanthanya berlaku untuk paragraf kelas <P CLASS="important">, tetapi #headerhanya mempengaruhi <H1 ID="header">(perbedaannya adalah bahwa pengidentifikasi harus unik dalam dokumen, dan kelas dapat digunakan beberapa kali). Dengan menggunakan alat-alat ini, Anda secara efektif membuat tag Anda sendiri, mendapatkan versi tersendiri dari HTML yang unik untuk situs Anda!

Itu adalah lompatan besar ke depan, tetapi pada saat itu tidak seorang pun (mungkin) berpikir untuk menggunakan CSS untuk tata letak. Ketika rekomendasi CSS 1 diterbitkan pada bulan Desember 96 , rekomendasi itu hampir tidak menyentuh tata letak sama sekali, itu hanya memisahkan fungsi HTML yang ada dari tag yang dilampirkan. Kami memiliki warna dan latar belakang font berkat <FONT COLOR>dan<BODY BACKGROUND>. Satu-satunya hal yang paling sedikit mempengaruhi lokasi objek pada halaman adalah properti yang floatsetara <IMG ALIGN>, yang menarik gambar ke samping dan termasuk aliran teks di sekitarnya, seperti di koran. Tidak begitu mengesankan.

Tapi ini tidak mengejutkan. Tidak ada alat tata letak nyata dalam HTML kecuali tabel, dan properti tabel terlalu sulit untuk digeneralisasi dalam CSS atau terkait dengan struktur tag, jadi tidak ada yang ditambahkan ke CSS 1. Kami hanya mengotomatiskan sedikit, misalnya, penggunaan tag <FONT>, jadi desain web menjadi tidak terlalu membosankan dan rawan kesalahan, kode halaman menjadi lebih bersih dan lebih mudah dirawat. Langkah maju yang cukup baik, dan semua orang dengan senang hati menerimanya, tetapi tabel tetap menjadi alat utama untuk tata letak.

Namun, itu normal. Pada umumnya, blog Anda hanya membutuhkan judul dan bilah samping. Tabel baik-baik saja dengan ini, dan struktur dasar ini cocok untuk sebagian besar situasi. Tidak begitu sulit untuk menyalin / menempel beberapa baris <TABLE BORDER=0>dan <TD WIDTH=20%>.

Selama beberapa tahun, ini adalah standar. Tabel untuk tata letak, CSS untuk ... yah, untuk gaya. Warna, ukuran, tebal, garis bawah. Bahkan ada trik bodoh ketika tautan ditekankan hanya ketika kursor mouse di atasnya. Kecantikan!

(Fakta menyenangkan: Kode HTML untuk sebagian besar layanan email belum datang dari era itu).

(Dan kemudian saya datang ke industri, pada usia dewasa 11 tahun, tanpa petunjuk apa yang saya lakukan, dan pada dasarnya belajar dengan anak 11 tahun lainnya yang juga tidak tahu apa yang mereka lakukan. Sepotong besar Jaringan dibuat oleh anak usia 11 tahun. anak-anak membuat situs web mereka sendiri, dan itu hebat. Mengapa pergi ke situs komersial jika Anda dapat berkenalan dengan hobi yang sangat spesifik dari beberapa pria atau wanita dari sisi lain planet ini?)

Masa gelap

Setahun setengah kemudian, pada pertengahan tahun 1998, kami dihadapkan dengan CSS 2 (omong-omong, saya suka latar belakang di halaman itu). Ini adalah pembaruan sederhana, yang menghilangkan beberapa kekurangan di berbagai bidang, tetapi yang paling menarik adalah penambahan sepasang penentuan posisi primitif: properti positionmemungkinkan Anda untuk menempatkan elemen dalam koordinat yang tepat, dan mode tampilan inline-blockmemungkinkan Anda untuk mengatur blok secara berurutan satu demi satu.

Buah yang menggoda, tetapi tidak bisa diakses! Penggunaannya positiontampak normal, tetapi penentuan posisi dalam piksel benar-benar bertentangan dengan desain HTML yang fleksibel, dan ketika layar diubah ukurannya, semuanya tentu berantakan atau ada kekurangan serius lainnya. Tampaknya ini sederhanainline-block cukup menarik; namun demikian, ia memecahkan masalah utama tata letak HTML, yang terdiri dari menempatkan objek dalam satu baris. Tetapi pada awalnya, tidak ada browser yang mengimplementasikan properti ini, sehingga para desainer mengabaikannya.

Saya tidak bisa mengatakan dengan pasti untuk alasan apa - mungkin karena penampilan posisi atau di bawah pengaruh beberapa faktor lain, tetapi sekitar waktu itu, penggemar memutuskan untuk mencoba membuat tata letak menggunakan CSS. Idealnya, Anda benar-benar dapat memisahkan konten halaman Anda dari penampilannya. Bahkan ada situs web CSS Zen Garden (dia masih hidup), yang membawa ide ini ke ekstrem. Di atasnya, kode HTML yang sama dikonversi menjadi proyek yang sama sekali berbeda setelah menerapkan style sheet yang berbeda.

Masalahnya adalah bahwa dukungan CSS awal adalah kereta sangat sialan. Melihat ke belakang, saya menduga bahwa pengembang browser hanya menduplikasi pemrosesan tag HTML dan berakhir dengan ini. Situs web RichInStyle masih memiliki daftar lengkap bug CSS di browser pada tahun-tahun itu. Inilah beberapa favorit saya:

IE 3 mengabaikan semua tag <style> dalam dokumen kecuali yang terakhir.
IE 3 mengabaikan pseudo-class, sehingga a:hoverberbunyi seperti .
IE 3 dan IE 4 memperlakukan batas autosebagai nol. Bahkan, bug ini bertahan hampir ke versi IE 6. Tapi ini normal, karena IE 6 juga digunakan secara tidak benar text-align: centeruntuk elemen blok.
Jika Anda menentukan URL absolut untuk gambar latar belakang, IE 3 akan mencoba untuk membuka gambar di program lokal, seolah-olah Anda mengunduhnya.
Netscape 4 , #id, h1#id .
Netscape 4 — ! — .
Netscape 4 <li> , .
float clear ( ), Netscape 4 Mac .

Itulah yang harus kami kerjakan. Dan apakah orang ingin membuat tata letak seluruh halaman di CSS? Ha.

Namun, popularitas ide ini semakin meningkat. Bahkan menjadi semacam slogan pemersatu bagi bagian lanjutan dari elit desainer - praktik terbaik, yang disebut-sebut sebagai satu-satunya argumen yang benar dalam debat. Menggunakan tabel untuk tata letak itu buruk, kata mereka. Tabel membingungkan pembaca layar (pembaca layar), mereka secara semantik salah, berinteraksi buruk dengan pemosisian CSS! Semua ini benar, tetapi sangat sulit untuk diterima.

Nah, kembali ke itu sebentar lagi. Pertama, mari kita lihat beberapa atmosfer di mana pengembangan web dikembangkan di wilayah 2000.

Akhir perang browser dan stagnasi berikutnya

Versi singkatnya adalah ini: Netscape menghasilkan uang dengan menjual browser Navigator (dibayar untuk bisnis, gratis untuk penggunaan pribadi), dan kemudian Microsoft datang ke pasar dengan Internet Explorer yang benar-benar gratis, dan kemudian Microsoft memiliki keberanian untuk menghubungkan IE dengan Windows. Bisakah kamu bayangkan? Beroperasi dengan browser ? Itu masalah besar. Microsoft menggugat , dia kalah, tetapi sebagai hasilnya, hampir tidak ada yang berubah.

Microsoft tetap melakukan apa yang diinginkannya, dan itu berhasil. Dia praktis menghancurkan Netscape. Kedua browser itu buggy, tapi buggy dengan cara yang berbeda. Oleh karena itu, situs yang diuji dalam satu browser hampir pasti akan berantakan di yang lain. Ini berarti bahwa ketika pangsa pasar Netscape turun, perancang web kurang memperhatikannya, sehingga lebih sedikit situs web yang dibuka secara normal di dalamnya, akibatnya pangsa pasar Netscape Navigator turun lebih banyak lagi.

Mungkin bukan kabar baik bagi pengguna di sistem operasi selain Windows. Yang lucu karena itu IE 5.5 untuk Mac, dan itu umumnya kurang buggy daripada IE 6 (omong-omong, Bill Gates pada waktu itu bukan seorang geek yang brilian sebagai pengusaha yang agresif dan kejam yang membuat kekayaan untuk sengaja menghancurkan setiap kompetisi yang menghalangi, yang pada akhirnya menyebabkan kerusakan pada seluruh industri, begitulah, omong-omong).

Ketika Windows XP dengan Internet Explorer 6 keluar pada pertengahan 2001, Netscape Navigator berubah dari Juggernaut besar menjadi cebol kecil untuk aplikasi niche.

Dan kemudian, setelah sepenuhnya dan sepenuhnya menguasai pasar, Microsoft berhenti. Sejak awal, Internet Explorer telah dirilis setiap tahun, tetapi setelah IE 6 ada penundaan lebih dari lima tahun. Itu masih tetap buggy, tetapi karena tidak adanya pesaing itu tidak terbukti. Dengan demikian, Windows XP juga terlihat cukup bagus untuk menangkap pasar desktop, dan versi Windows berikutnya juga tidak keluar pada waktu yang sama.

Juga menghentikan pekerjaan konsorsium W3C, yang menerima standar (jangan dikacaukan dengan W3Schools, lintah SEO). Pada pertengahan 90-an, HTML direvisi beberapa kali, dan kemudian dibekukan sebagai HTML 4. CSS diperbarui dari versi pertama ke versi kedua hanya dalam satu setengah tahun, tetapi juga membeku di sini. Pembaruan minor CSS 2.1tidak akan mencapai status "rekomendasi kandidat" hingga awal 2004, dan butuh tujuh tahun untuk menerima versi final.

Dalam situasi dominasi lengkap IE 6 ini, tampaknya seluruh Jaringan tampak membeku dalam waktu. Standar tidak masalah, karena sebenarnya hanya ada satu browser. Semua yang dia lakukan menjadi standar de facto. Ketika Internet semakin populer, cengkeraman pencekikan IE juga membuat sulit untuk menggunakan platform apa pun selain Windows, karena IE hanya tersedia untuk Windows. Tidak pernah mungkin untuk menjamin bahwa situs web akan berfungsi di peramban lain mana pun.

(Ada gagasan bahwa monopoli itu buruk. Pasti ada semacam hukum yang menentang mereka!)

Pada saat yang sama, Netscape telah memperburuk posisinya, setelah memulai perubahan besar-besaran dari mesin. Akibatnya, standar Netscape 6 yang jauh lebih konsisten dirilis, dan harganya beberapa tahun lenyap dari pasar, di mana pada saat itu IE terus meningkatkan bagiannya. Browser Netscape 6 bahkan tidak akan pernah mencapai 10%, sementara IE akan mencapai puncaknya pada 96%. Di sisi lain, mesin baru keluar dengan sumber terbuka sebagai bagian dari Mozilla Application Suite, yang nantinya akan berperan.

Tetapi sebelum itu ada beberapa tahun lagi, tetapi untuk sekarang ...

Mode Kompatibilitas

Semua implementasi CSS awal di browser penuh dengan bug. Mungkin yang paling terkenal dari mereka adalah bug dengan model wadah (model kotak).

Anda lihat, sebuah wadah (ruang persegi panjang yang ditempati oleh suatu elemen) memiliki beberapa dimensi: lebar dan tinggi sendiri, lalu padding, lalu batas opsional, dan kemudian bidang yang memisahkannya dari wadah tetangga. CSS menunjukkan bahwa semua jarak ini menumpuk. Misalnya, sebuah wadah dengan gaya berikut:

    width: 100px;
    padding: 10px;
    border: 2px solid black;

... akan mengambil lebar 124 piksel, dari perbatasan ke perbatasan.

Namun, IE 4 dan Netscape 4 mengambil pendekatan yang berbeda: mereka memandang lebar dan tinggi sebagai dimensi dari perbatasan ke perbatasan, dari mana batas dan margin dikurangi untuk mendapatkan lebar elemen itu sendiri. Bidang yang sama di browser ini akan memiliki lebar 100 piksel dari perbatasan ke perbatasan, dan 76 piksel akan tetap untuk konten.

IE 6 memutuskan untuk memperbaiki kontradiksi ini dengan spesifikasinya. Sayangnya, hanya membuat perubahan akan merusak desain sejumlah situs web yang berfungsi baik di IE dan Netscape.

Oleh karena itu, tim IE menghasilkan kompromi yang sangat aneh: mereka menyatakan perilaku lama (bersama dengan beberapa kesalahan utama lainnya) sebagai "mode kompatibilitas" (mode quirks, secara harfiah "bekerja dengan kebiasaan") dan menyalakannya secara default . Untuk beralih ke "mode ketat" atau "mode standar" yang baru, Anda perlu menentukan "doctype" di awal dokumen, sebelum tag <html>. Itu terlihat seperti ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Selama bertahun-tahun, setiap orang harus menyisipkan baris bodoh ini di awal setiap dokumen HTML (nantinya HTML5 akan menyederhanakannya <!DOCTYPE html>). Jika Anda memikirkannya, ini adalah cara yang sangat aneh untuk memilih perilaku CSS yang tepat. Deklarasi doctype telah menjadi bagian dari spesifikasi HTML sejak pertengahan 90-an , tetapi tidak ada yang menggunakannya. Saya kira ide Microsoft adalah untuk memungkinkan pilihan tanpa memperkenalkan ekstensi milik. Menggunakan deklarasi seperti itu dapat menghindari perilaku yang awalnya salah. Keluar nyaman untuk tim IE!

Yang lucu adalah bahwa mode kompatibilitas dengan "quirks" masih ada. Dan itu masih diinstal secara defaultdi semua browser, dua puluh tahun kemudian! Daftar persis "quirks" telah berubah seiring waktu. Secara khusus, baik Chrome maupun Firefox tidak menggunakan model wadah IE bahkan dalam mode ini, tetapi banyak kesalahan lain yang ditiru.

Browser modern juga memiliki mode "hampir standar" yang hanya mengemulasi satu kekhasan. Mungkin ini adalah fungsi paling memalukan kedua: jika sel tabel hanya berisi gambar, maka ruang di bawah ini dihapus. Sesuai dengan aturan CSS yang biasa, gambar berada di baris teks (kosong), yang membutuhkan ruang di bawah ini - untuk elemen surat interlinear, seperti "y". Peramban awal tidak dapat menangani ini secara normal, namun, beberapa situs web yang dibuat setelah sekitar 2000 mengandalkan fitur ini, meskipun yang lainnya sepenuhnya sesuai. Sebagai contoh, mereka memotong gambar besar menjadi potongan-potongan, yang ditempatkan di sel-sel tabel yang berdekatan satu sama lain. Jika, sesuai dengan standar, menambah ruang kosong, maka gambar akan berantakan.

Tapi kembali ke masa lalu. Meskipun standar secara formal berlaku, itu menciptakan masalah baru. Karena IE 6 mendominasi Web, dan deklarasi DOCTYPE adalah opsional, tidak perlu untuk berpikir tentang mendukung standar-standar ini dalam "mode ketat" browser. Browser lain akhirnya meniru itu, dan perilaku kustom menjadi standar de facto. Desainer web yang peduli pada hal-hal seperti itu (menurut kami, ada banyak di antara kami) meluncurkan kampanye profil tinggi untuk memungkinkan mode ketat, karena ini merupakan langkah pertama yang mutlak diperlukan untuk memastikan kompatibilitas dengan browser lain.

XHTML Naik dan Turun

Sementara itu, W3C telah kehilangan minat pada HTML dalam mendukung XHTML. Ini adalah upaya untuk mendesain ulang HTML menggunakan sintaks XML daripada SGML.

(Apa SGML, Anda bertanya? Saya tidak tahu. Tidak ada yang tahu. Ini adalah tata bahasa di mana HTML dibangun, dan ini adalah satu-satunya hal yang diketahui tentang hal itu).

Untuk kredit konsorsium, pada saat itu ada alasan yang cukup baik untuk keputusan semacam itu. Sebagai aturan, HTML ditulis secara manual (seperti sekarang), dan ini berarti wajib adanya kesalahan acak. Browser tidak menolak HTML buggy, tetapi melibatkan berbagai metode untuk memperbaiki kesalahan - dan, seperti dalam hal lain, browser yang berbeda menangani kesalahan secara berbeda. HTML yang agak terdistorsi tampaknya bekerja dengan baik di IE 6 (di mana "berfungsi dengan baik" berarti "melakukan apa yang Anda harapkan dari itu"), tetapi sepenuhnya berantakan di browser lain.

Konsorsium W3C memilih XML karena pada awal 2000-an mereka melihat XML sebagai solusi universal untuk semua masalah. Jika Anda tidak tahu, XML memiliki pendekatan yang jauh lebih eksplisit dan agresif untuk penanganan kesalahan - jika dokumen Anda berisi kesalahan penguraian, maka seluruh dokumen tidak valid. Ini berarti bahwa jika Anda memilih XHTML dan membuat satu kesalahan ketik, maka tidak ada yang ditampilkan di browser sama sekali . Hanya sebuah kesalahan.

Menyebalkan sekali. Pada pandangan pertama, semuanya tampak normal, tetapi perlu diingat: XML universal biasanya dirakit secara dinamis menggunakan pustaka yang memperlakukan dokumen sebagai pohon yang Anda manipulasi, dan pada akhirnya mengubahnya menjadi teks. Ini bagus untuk penggunaan umum XML untuk membuat serialisasi data saat data Anda sudah menjadi pohon dan sebagian besar struktur XML sederhana dan dapat diulang, sehingga mudah disembunyikan dalam fungsi.

HTML tidak seperti itu. Dokumen HTML memiliki struktur pengulangan yang andal; bahkan artikel ini pada halaman diformat terutama oleh tag <p>, tetapi juga mengandung tak terduga <em>di dalam teks utama dan acak<h3>antara paragraf. Tidak terlalu menyenangkan untuk menyandikan ini dalam bentuk pohon. Dan ini penting, karena pada saat yang bersamaan, rendering sisi server mendapatkan momentum, dan HTML yang dihasilkan dulu dan sekarang! - Dikirim dengan template yang menganggapnya sebagai aliran teks.

Jika halaman HTML adalah dokumen yang sepenuhnya statis, maka XHTML dapat berfungsi - Anda menulis dokumen, melihatnya di browser dan tahu bahwa semuanya berfungsi. Tidak masalah. Tetapi untuk membuat dokumen secara dinamis dan berisiko bahwa dalam beberapa situasi batas seluruh situs akan ditipu, dan pengunjung hanya akan melihat kesalahan di browser? Ini menyebalkan.

Tentu saja, penyebaran standar Unicode baru-ketinggalan jaman di sekitar waktu itu juga memainkan peran. Maka tidak selalu jelas bagaimana menggunakannya, dan satu urutan UTF-8 yang buruk sudah cukup untuk menganggap seluruh dokumen XML sebagai terdistorsi dan "tidak valid"!

Jadi, setelah dimanjakan, kami hampir lupa tentang XHTML. Dia hanya meninggalkan dua trek:

Semua orang berhenti menggunakan nama tag dalam huruf besar! Sampai jumpa <BODY>, halo <body>! XML adalah case-sensitive dan semua tag XHTML adalah huruf kecil, jadi tag judul tidak berfungsi (fakta yang menyenangkan: API JavaScript masih melewati nama tag HTML dalam huruf besar) Ini mungkin karena semakin populernya penyorotan sintaksis; kami tidak lagi menulis di Notepad, seperti pada tahun 1997.
. , HTML : , <p>...</p>, <br>. <br> , </br>. XML : , <br/>, <br></br>.

XHTML , - , <br/> HTML-. XML ; HTML5 , . , <script/> <script> — HTML !

Saya hanya kehilangan satu hal di XHTML. Di sana Anda dapat menggunakan bahasa logam XSLT untuk membuat templat “di dalam peramban” (yaitu, memasukkan konten halaman ke tata letak umum situs) tanpa menulis skrip. Itu adalah satu - satunya cara yang mungkin untuk melakukan ini, dan itu sangat keren jika semuanya bekerja. Tetapi beberapa kesalahan kecil dapat merusak segalanya.

Tampilan tata letak CSS

Kembali ke CSS!

Anda adalah perancang web pemula, dan untuk beberapa alasan Anda ingin mencoba menggunakan gaya CSS untuk tata letak, meskipun mereka jelas dimaksudkan hanya untuk warna dan hal lainnya. Apa yang harus dilakukan?

Seperti yang saya sebutkan, masalah utama adalah posisi horizontal benda di sebelah satu sama lain . Penempatan vertikal bukan masalah - ini adalah perilaku HTML normal. Satu-satunya alasan semua orang menggunakan tabel adalah karena mereka dapat memecah materi menjadi sel dan mengaturnya berdampingan dalam kolom.

CSS 2 memperkenalkan beberapa mode tampilan yang sesuai dengan bagian tabel. Tetapi untuk menggunakannya, Anda membutuhkan tiga tingkat sarang yang sama seperti dalam tabel nyata: tabel itu sendiri, lalu baris, lalu sel. Mereka tidak ada di sini, dan dalam hal apa pun, IE tidak akan segera mulai mendukung mode seperti itu.

Ada lebih banyak position, tetapi ia terus-menerus berusaha meletakkan benda di atas satu sama lain. Hmm

Apa yang tersisa?

Bahkan, hanya satu alat: float.

Saya mengatakan bahwa ini floatmemungkinkan Anda untuk membuat koran mengalir di sekitar gambar dengan teks, tetapi ini adalah deskripsi yang sangat umum. Secara prinsip, itu bisa diterapkan ke elemen apa saja. Jika Anda membutuhkan bilah sisi, Anda dapat menyandarkannya ke tepi kiri, menetapkan lebar 20% dari halaman, dan mendapatkan sesuatu seperti ini:

+ --------- +
| sidebar | Halo, dan selamat datang di situs web saya!
| |
+ --------- +

Sayangnya, propertinya floatsedemikian rupa sehingga teks akan mengalir di sekitarnya. Jadi, jika teks pada halaman lebih panjang dari bilah sisi, itu akan muncul di bawah - dan ilusi akan dihancurkan. Tapi itu bisa dielakkan. Spesifikasi CSS menjelaskan bahwa konten floattidak dapat saling mengalir satu sama lain, jadi hanya menempatkan satu lagi sudah cukup float!

+ --------- + + ----------------------------------- +
| sidebar | | Halo, dan selamat datang di situs web saya! |
| | | |
+ --------- + | Berikut paragraf yang lebih panjang untuk ditampilkan |
            | bahwa CSS otak galaksi saya mengambang |
            | omong kosong mencegah bungkus teks. |
            + ----------------------------------- +

Pendekatan ini berhasil, tetapi batasannya jauh lebih buruk daripada batasan tabel. Misalnya, jika Anda menambahkan catatan kaki, itu akan naik ke kanan teks utama, karena untuk browser "kursor" masih di atas, di sebelah kanan blok float. Karena itu, Anda perlu menggunakannya clearuntuk memakukan elemen di bawah semua pelampung. Dan jika Anda membuat bilah samping sebesar 20% dari lebar halaman, dan badan pada 80%, maka ruang di antara mereka akan mendorong halaman dari layar dan menunjukkan bilah gulir horizontal yang jelek. Anda selalu perlu mengingat aritmatika bodoh ini. Jika Anda memiliki batas atau latar belakang set pada kedua belah pihak, maka mereka akan dengan tinggi yang berbeda, sehingga Anda harus melakukan benar-benar hal-hal aneh sehingga yangmemperbaikinya. Dan pembaca layar akan membaca seluruh bilah samping sebelum beralih ke teks utama, yang cukup kasar bagi pengguna. Oleh karena itu, Anda perlu menggunakan bahkan pengaturan yang lebih kompleks dengan tiga kolom, yang tengah pertama muncul di HTML.

Sebagai hasilnya, kami mendapatkan desain yang terlihat indah, berfungsi dengan baik dan skala dengan benar, tetapi dijelaskan oleh kode CSS yang sangat kacau. Tidak ada yang Anda tulis benar-benar sesuai dengan apa yang Anda inginkan - dan ini adalah bagian utama dari desain, dan bukan bingkai samping! Sulit untuk memahami bagaimana kode CSS terhubung dan apa yang muncul di layar. Dan kemudian situasinya akan menjadi jauh lebih buruk sebelum akhirnya membaik.

Kotak Gambar Kecil - 2

Berbekal mainan baru, kami dapat meningkatkan jaringan miniatur kami. Tata letak tabel asli sangat membosankan, bahkan jika Anda tidak memberikan tag semantik. Sekarang kamu bisa melakukan yang lebih baik!

<ul class="thumbnail-grid">
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    ...
</ul>

Ini sangat ideal: HTML menyimpan konten halaman dalam bentuk yang wajar, dan kemudian CSS menjelaskan seperti apa bentuknya sebenarnya.

Sayangnya, implementasi pada floatakan sedikit kasar. Versi baru ini beradaptasi dengan lebih baik untuk ukuran layar yang berbeda, tetapi membutuhkan beberapa peretasan: sel harus memiliki ketinggian tetap, memusatkan seluruh grid cukup sulit, dan efek grid menghilang dengan elemen yang lebih luas. Menjadi jelas bahwa kami mendapat tabel yang hampir sama, tetapi dengan jumlah kolom yang fleksibel. Kami hanya mencoba meniru itu.

Anda juga membutuhkan mantra aneh ini clearfix, terkenal di era itu. Karena float tidak menggerakkan "cursor", maka<ul>dengan elemen mengapung tinggi nol. Itu berakhir tepat di mana ia dimulai, dan semua thumbnail mengapung cukup tidur dari bawah. Lebih buruk lagi, karena semua elemen berikutnya tidak memiliki pelampung yang berdekatan , mereka akan sepenuhnya mengabaikan thumbnail, terus membuat di bawah "kotak" kosong - menciptakan kekacauan!

Solusinya adalah menambahkan elemen dummy di akhir daftar, yang tidak memakan tempat, tetapi dengan atribut CSS clear: both, yang menghilangkannya di bawah semua float. Ini secara efektif mendorong yang terakhir di <ul>bawah thumbnail, dan dengan rapi mengikutinya dari bawah.

Nantinya, browser akan mulai mendukung elemen semu dari "konten yang dihasilkan" ::beforedan::after, Yang akan sepenuhnya meninggalkan elemen boneka. Lembar gaya dari pertengahan 2000-an sering termasuk baris berikut:

.thumbnail-grid::after {
    content: '';
    display: block;
    clear: both;
}

Namun itu lebih baik daripada tabel.

DHTML

Sebagai penyimpangan singkat ke dunia JavaScript, properti yang ketinggalan jaman ini position benar-benar memungkinkan tata letak yang agak dinamis. Saya dengan sepenuh hati menentang bidat semacam itu, paling tidak karena tidak ada yang pernah melakukannya dengan benar, tetapi itu menyenangkan untuk dimainkan.

Maka dimulailah era "HTML dinamis," yaitu, HTML dengan efek JavaScript. Sekarang istilah ini telah benar-benar keluar dari mode, karena sekarang kita tidak dapat membuat bahkan blog statis sialan tanpa JavaScript. Semuanya dimulai jauh lebih tidak berbahaya: remaja disisipkan pada halaman glitter yang mengikuti kursor mouse, atau jam analog kecil yang berdetak secara real time.

Kumpulan skrip yang paling populer adalah Dynamic Drive. - Situs ini secara ajaib masih ada. Mungkin berisi ratusan mainan yang belum diperbarui sejak awal 2000-an.

Jika Anda tidak ingin mempelajari koleksi ini, berikut adalah contohnya: setiap tahun (kecuali yang sekarang, ketika saya lupa, maaf) pada hari ulang tahun saya, saya ingin menambahkan confetti dan omong kosong lainnya ke blog saya. Saya sangat malas, jadi saya memulai tradisi dengan bantuan naskah ini, yang saya temukan di suatu tempat . Awalnya ditujukan untuk kepingan salju dan ditempatkan pada halaman dengan banyak gambar position: absolute, dan kemudian berulang kali mengubah koordinat mereka.

Bandingkan ini dengan versi yang saya tulis dari awal beberapa tahun yang lalu : ini hanya kode JS keciluntuk menyesuaikan gambar, dan kemudian browser menghidupkannya menggunakan CSS. Ini adalah skrip yang sedikit kurang fungsional, tetapi memungkinkan browser untuk melakukan semua pekerjaan, bahkan mungkin dengan akselerasi perangkat keras. Sejauh itulah kita sudah sampai.

Web 2.0

Masa gelap tidak bisa bertahan selamanya. Serangkaian peristiwa terjadi yang menarik kami ke dalam cahaya.

Salah satu acara utama adalah rilis Firefox - atau, untuk yang paling canggih, awalnya Phoenix, dan kemudian Firebird. Versi 1.0 muncul pada November 2004 - dan mulai menggigit IE dengan baik. Browser bekerja pada inti yang ditulis ulang dari Netscape 6, yang diekstraksi dari jantung Mozilla Suite ke aplikasi terpisah. Itu cepat, sederhana, dan jauh lebih baik dalam mempertahankan standar, meskipun sama sekali tidak ada yang penting.

Yang sebenarnya adalah Firefox memiliki tab. Di IE 6 mereka tidak. Jika Anda ingin membuka halaman web kedua, Anda membuka jendela baru. Sialan itu menyebalkan kawan. Firefox telah menjadi keajaiban nyata.

Tentu saja, Firefox bukanlah peramban pertama dengan tab; di peramban lengkap dari Mozilla Suite, mereka juga ada, dan di Opera lanjutan mereka sudah ada sejak lama. Tetapi karena berbagai alasan, Firefox lah yang lepas landas, paling tidak karena fakta bahwa ia tidak memiliki panel iklan raksasa di bagian atas, seperti Opera.

Tentu saja, desainer mempromosikan Firefox sehubungan dengan dukungan standar, tetapi argumen ini hanya menarik desainer lain, bukan orang tua mereka. Salah satu demonstrasi paling populer dan spektakuler adalah tes Acid2 , yang dirancang untuk menguji standar web modern. Dia menunjukkan senyuman yang bagus, jika standarnya dikerjakan dengan benar, dan gambar neraka di IE 6 .

Hasil tes Acid2 di browser IE 6

Firefox awal tidak sempurna. Tapi tentu saja, ia mendukung standar jauh lebih baik, dan Anda bisa melihat kemajuan hingga browser sepenuhnya lulus semua tes dengan rilis Firefox 3.

Firefox juga dibantu oleh mesin JavaScript yang lebih cepat: itu sebelum JIT. Itu jauh, jauh lebih cepat daripada IE. Sebagai contoh, sejauh yang saya ingat, IE 6 menerapkan getElementByIditerasi melalui seluruh dokumen, bahkan dalam kasus pengidentifikasi unik. Lihatlah pengumuman lama rilis jQuery , biasanya disertai dengan jadwal kinerja, di mana semua browser pada urutan lebih cepat dari IE 6-8.

Oh, dan kemudian IE 6 adalah lubang keamanan berjalan raksasa, terutama dengan dukungan asli untuk komponen biner sewenang-wenang yang hanya perlu mengklik "Ya" pada kotak dialog muskil untuk mendapatkan akses penuh dan tidak terbatas ke sistem Anda. Ini mungkin tidak berkontribusi pada reputasi IE.

Bagaimanapun, dengan munculnya alternatif sekecil IE, bahkan desainer paling ganas tidak bisa hanya mengoptimalkan situs untuk IE 6 dan berakhir di sana. Sekarang ada alasan untuk menggunakan mode ketat, ada alasan untuk peduli tentang kompatibilitas dan standar, dan Firefox terus berupaya untuk mematuhinya sebanyak mungkin, sementara IE 6 tetap dalam stagnasi.

(Saya akan mengatakan bahwa efek ini membuka pintu untuk OS X, serta untuk iPhone. Saya tidak bercanda! Pikirkan: jika peramban iPhone tidak benar-benar bekerja dengan apa pun, karena semua orang masih membuat situs untuk IE 6, itu akan tetap menjadi alternatif yang mahal untuk Palm. Ingat bahwa pada awalnya Apple bahkan tidak ingin merilis aplikasi sendiri - itu bergantung pada Internet).

(Ngomong-ngomong, Safari dirilis pada Januari 2003, berdasarkan fork KHTML dari browser KDE Konqueror. Saya pikir saya menggunakan KDE pada waktu itu, jadi itu sangat menarik, tetapi tidak ada yang benar-benar memikirkan OS X dengan itu. pangsa pasar konyol 2%).

Faktor penting lain muncul pada 1 April 2004, ketika Google mengumumkan Gmail. Ha ha Itu konyol. Antarmuka web yang nyaman untuk surat? Lelucon yang bagus, google.

Oh sial. Mereka tidak bercanda.Bagaimana cara kerja interaktif ini?

Hari ini, setiap pengembang web tahu jawabannya - ini adalah XMLHttpRequest, dinamakan demikian karena tidak ada yang pernah menggunakannya untuk permintaan XML. Itu diciptakan oleh Microsoft untuk Exchange mail, dan kemudian diklon oleh Mozilla (saya hanya mengutip dari Wikipedia ).

Yang penting adalah XMLHttpRequest memungkinkan Anda untuk membuat permintaan HTTP dari JavaScript. Sekarang Anda dapat menyegarkan hanya bagian halaman dengan data baru, sepenuhnya di latar belakang, tanpa memuat ulang. Tidak ada yang pernah mendengar hal ini sebelumnya, dan ketika Google meluncurkan seluruh klien email di atasnya, itu adalah keajaiban mutlak.

Mungkin semua ini adalah kesalahan yang akan mengarah ke masa depan yang buruk di mana halaman statis memuat tiga paragraf teks di latar belakang menggunakan XHR tanpa alasan yang jelas, tetapi ini adalah topik untuk artikel lain .

Dalam nada yang sama, jQuery, keajaiban yang sama, dirilis pada Agustus 2006. Dia tidak hanya menggambarkan perbedaan antara API "JScript" IE dan pendekatan standar yang diadopsi oleh semua yang lain (yang dilakukan sebelumnya oleh perpustakaan lain), tetapi juga sangat disederhanakan bekerja dengan seluruh kelompok elemen pada saat yang sama, yang secara historis tetap sangat menyebalkan. Sekarang cukup mudah untuk menerapkan CSS di mana saja dari JavaScript! Ini adalah ide yang buruk, tetapi dalam situasi itu tidak ada pilihan yang lebih baik!

Saya mendengar Anda keberatan: JavaScript lagi! Apakah ini artikel tentang CSS?

Anda benar sekali! Saya menyebutkan semakin populernya JavaScript, karena itu yang langsung mengarah ke keadaan modern CSS, berkat faktor hebat lainnya:

Ambisi

Firefox telah menunjukkan bahwa browser dapat tumbuh cukup cepat - setiap peningkatan baru di Acid2 sangat mengasyikkan. Gmail menunjukkan kepada kita bahwa web mampu lebih dari sekedar menampilkan teks biasa dengan kepingan salju yang jatuh.

Dan orang-orang mulai berfantasi .

Masalahnya adalah browser tidak menjadi lebih baik. Firefox dalam beberapa hal lebih cepat dan lebih akurat mengikuti spesifikasi CSS, tetapi pada dasarnya tidak ada yang baru. Hanya kotak alat yang membaik , dan ini terutama memengaruhi JavaScript. CSS adalah bahasa statis, jadi Anda tidak bisa menulis perpustakaan untuk memperbaikinya. Membuat CSS menggunakan JavaScript dimungkinkan, tetapi sial, itu selalu merupakan ide yang buruk.

Masalah lain adalah bahwa CSS 2 benar-benar hanya bagus dalam menata segi empat gaya. Itu luar biasa di tahun 90-an, ketika setiap OS memiliki antarmuka gaya persegi panjang. Tetapi saatnya telah tiba untuk Windows XP dan OS X, di mana semuanya menjadi cemerlang, mengkilap dan bulat. Agak canggung bahwa sudut bulat dan tanda centang rapi dengan bayangan ada di peramban file Anda , tetapi tidak ada tempat di Internet.

Jadi masa gelap kembali.

Usia Hack CSS

Desainer menginginkan banyak hal yang tidak bisa ditawarkan CSS.

Sudut membulat. Yang persegi keluar dari mode, dan sekarang semua orang ingin kancing dengan sudut bulat, karena "masa depan ada bersama mereka" (tombol asli juga keluar dari mode untuk beberapa alasan) Sayangnya, CSS tidak dapat melakukan ini. Pilihan Anda:
1. . , . .
2. , . , .
3. , 3×3 . JavaScript.
4. , - lol
, IE 6 PNG 8- - ; 1-, , , GIF. , :
```
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bite-my-ass.png');
```
: ! . .
. CSS 3 opacity… IE, filter. , PNG, … , .
jQuery , fadeIn, . - , 2000- Linux ( ) .

, , JavaScript, . , , .
! . , , , . CSS , <tr class="odd"> (, !) - jQuery.
CSS 2 >, , ul.foo > li , , IE 6 — — !

Tetapi semua ini murni pertimbangan estetika. Jika Anda tertarik pada tata letak, ya, penampilan Firefox segera membuat hidup Anda lebih mudah dan lebih rumit.

Apakah kamu ingat inline-block? Firefox 2 sebenarnya mendukungnya! Itu buggy dan tersembunyi di balik awalan vendor, tetapi lebih atau kurang berhasil, yang memungkinkan desainer untuk mencoba menggunakannya. Dan kemudian Firefox 3 keluar, yang mendukungnya kurang lebih secara normal, yang tampak seperti keajaiban. Versi ketiga dari grid thumbnail kami tidak lebih rumit dari lebar dan inline-block:

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
}

Gagasan umum inline-blockadalah bahwa bagian dalam bertindak seperti blok, tetapi blok itu sendiri ditempatkan dalam teks biasa, seperti gambar. Dengan demikian, setiap thumbnail ditempatkan dalam wadah, tetapi semua wadah ini terletak bersebelahan, dan karena lebarnya sama, mereka masuk ke dalam kisi. Dan karena secara fungsional berupa baris teks, tidak ada efek aneh pada bagian halaman lainnya, seperti halnya dengan float.

Tentu saja, ada beberapa kekurangannya. Misalnya, tidak ada yang dapat dilakukan dengan ruang yang tersisa, sehingga ada risiko bidang besar muncul di sebelah kanan pada layar besar yang tidak standar. Ada juga masalah pemecahan mesh oleh sel lebar. Tapi setidaknya itu bukan pelampung.

Satu masalah kecil tetap: IE 6. Didukung secara teknisinline-block, tetapi hanya pada elemen bawaan alami seperti <b>dan <i>, tetapi tidak <li>. Itu bukan bagaimana Anda benar-benar ingin (atau berpikir) untuk digunakan inline-block. Eh.

Untungnya, pada titik tertentu, seorang jenius mutlak menemukan hasLayoutoptimasi internal di IE yang menandai apakah elemen memiliki ... eh ... markup. Dengar, aku tidak tahu. Pada dasarnya, ini mengubah path rendering untuk elemen - jadi ini bukan ini tetapi bug lain yang muncul , seperti mode kompatibilitas berdasarkan pada setiap elemen! Hasilnya, ternyata semua hal di atas berfungsi di IE 6, jika Anda menambahkan beberapa baris:

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
    *zoom: 1;
    *display: inline;
}

Tanda bintang di awal membuat properti tidak valid, jadi browser harus mengabaikan seluruh string ... tetapi untuk beberapa alasan yang tidak diketahui, IE 6 mengabaikan tanda bintang dan menerima sisa aturan (hampir semua tanda baca berfungsi, termasuk tanda hubung atau - favorit pribadi saya - garis bawah). Properti zoom adalah ekstensi Microsoft yang mengukur semua hal, dengan efek samping pengaturan properti tata letak ke elemen. Dan itu display: inline harus memaksa setiap elemen untuk memasukkan isinya ke dalam satu baris besar teks, tetapi IE memproses elemen inlinedengan properti "markup" inline-block.

Dan di sini kita melihat potensi sebenarnya dari peretasan CSS. Aturan khusus peramban, dengan sintaks yang sengaja buruk yang diabaikan oleh satu peramban, mereproduksi efek yang masih tidak dapat dipahami dari apa yang Anda tulis. Seluruh buku teks menjelaskan cara membuat sesuatu yang sederhana, seperti kisi, tetapi agar ini berfungsi di sebagian besar browser saat itu. Anda juga akan melihat * html, html > /**/ bodydan segala macam omong kosong lainnya. Ini daftar lengkapnya ! Dan ingat hack "clearfix"? Versi lengkap , kompatibel dengan semua browser, sedikit lebih buruk:

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Apakah mengherankan orang-orang mulai mengeluh tentang CSS?

Itu adalah era copy-paste buta dalam upaya sia-sia untuk membuat benda sialan ini bekerja. Contoh: seseorang (saya pernah menggali kode sumber, tetapi tidak dapat menemukannya sekarang) memiliki ide aneh untuk selalu menginstal body { font-size: 62.5% }, karena unit relatif dianggap "baik", karena keinginan untuk mengganti ukuran font default browser standar 16px (yang, ternyata benar) dan kebutuhan untuk berurusan dengan kesalahan IE. Setelah beberapa waktu, ia berhenti melakukan ini, tetapi kerusakan telah terjadi, dan ribuan situs web telah bertindak dengan cara ini, menganggapnya sebagai "praktik terbaik." Ini berarti bahwa jika Anda ingin mengubah ukuran font default browser Anda ke segala arah, Anda mendapatkan omong kosong - jika Anda menguranginya dan banyak halaman web menjadi mikroskopis, jika Anda meningkatkannya, maka semuanya akan tetap kecil jika Anda menambah lebih banyak lagi , maka situs yang menghormati keputusan Anda akan menjadi sangat besar. Setidaknya hari ini kita memiliki skala yang lebih baik, saya pikir.

Ya, dan ingat: StackOverflow belum muncul. Semua pengetahuan diturunkan dari mulut ke mulut. Jika Anda beruntung, Anda tahu tentang beberapa situs dengan tips seperti QuirksMode dan Eric Meyer.

Sebenarnya, periksa situs css / edge Mayer . Ada beberapa contoh liar yang dilakukan orang, bahkan hanya dengan CSS 1, pada tahun 2002. Saya masih berpikir bahwa complexspiral adalah jenius murni, meskipun hari ini semuanya dilakukan dengan opacitydan hanya satu gambar. Metode dari raggedfloat hanya menerima dukungan CSS asli hanya beberapa tahun yang lalu, dengan munculnya shape-outside! Penulis ini juga memberi kami reset CSS , menghilangkan perbedaan antara gaya browser default.

(Peran Eric Meyer dalam CSS sulit ditaksir terlalu tinggi. Ketika putri kecilnya Rebecca meninggal enam tahun lalu, ia diabadikan dengan warna CSS-nya sendiri, rebeccapurple, kasing unik. Itulah yang dihargai oleh komunitas daringnya! Nah, sekarang saya harus menangisi kisah ini.)

Masa depan akan datang, tetapi secara bertahap

Desainer dan pengembang secara bertahap mendorong batas kemampuan browser. Browser sejauh ini dikelola dengan buruk. Semua perbaikan, solusi, dan perpustakaan adalah rahasia, rapuh, rentan kesalahan, dan / atau berat.

Jelas, browser membutuhkan fungsionalitas baru. Tetapi melepaskannya saja tidak cukup; Microsoft melakukan banyak hal, dan pada dasarnya itu menyebabkan kekacauan baru.

Tetapi beberapa upaya putus asa terjadi. Karena kepala W3C masih duduk di gelandangannya sendiri - menolak bahkan perbaikan HTML yang diusulkan dalam mendukung XML - beberapa pengembang browser aktif (Apple, Mozilla dan Opera) memutuskan untuk mendirikan klub mereka sendiri. Pada Juni 2004, kelompok kerja WHATWG dibentuk, dan mulai bekerja pada standar HTML5. Pada akhirnya, itu sepenuhnya menghilangkan kebutuhan untuk XHTML dan menghilangkan sejumlah masalah keamanan ketika bekerja dengan HTML biasa. Selain itu, ia memberikan beberapa manfaat baru, seperti dukungan asli untuk audio, video, dan kontrol bentuk untuk tanggal dan warna. Dan hal-hal lain yang dengan kikuk didukung oleh kontrol JavaScript. Dan, um, mereka masih didukung dengan canggung di sana.

Lalu datanglah CSS 3. Saya tidak tahu pada titik apa ini terjadi. Dia muncul perlahan-lahan, dengan sekuat tenaga, seperti seekor ayam yang menetas dari telur dan tidak tergesa-gesa, sial, untuk pergi ke mana-mana.

Saya bisa membuat banyak asumsi yang masuk akal. Saya pikir itu dimulai dengan border-radius. Secara khusus, dengan -moz-border-radius. Saya tidak tahu kapan pertama kali diperkenalkan, tetapi pelacak bug Mozilla menyebutkannya kembali pada tahun 1999.

Lihat, antarmuka pengguna Firefox sendiri dirender menggunakan CSS. Jika Mozilla ingin melakukan sesuatu yang tidak dapat dilakukan dengan CSS, ia menambahkan propertinya sendiri dengan awalan -mozuntuk menunjukkan bahwa itu adalah penemuan mereka sendiri. Dan jika tidak ada kerugian nyata dalam hal ini, maka itu membuat properti tersedia untuk situs web.

Saya kira dorongan untuk CSS 3 benar-benar dimulai ketika Firefox lepas landas - dan para desainer menemukan properti itu -moz-border-radius. Sudut-sudut bundar yang tiba-tiba muncul! Tidak ada lagi keributan di Photoshop, cukup tulis satu baris! Hampir dalam semalam, sudut-sudut bulat digergaji di mana-mana.

Dan dari sana semuanya bergulir seperti bola salju. Masalah umum diselesaikan satu per satu dengan bantuan fungsi CSS baru, yang digabungkan menjadi versi baru CSS - CSS 3. Masalah utama memecahkan masalah desain yang disebutkan sebelumnya:

Sudut membulat dengan border-radius.
Gradien menggunakan linear-gradient(), dll.
Berbagai latar belakang itu sendiri bukanlah masalah, tetapi memfasilitasi beberapa hal lain.
Transparansi menggunakan opacitydan saluran alpha dalam warna.
Bayangan di wadah.
, CSS 2, 2.1 .
(border image), , .
jQuery ( JS ).
:nth-child(), CSS.
. , ? SVG, , . , , , CSS! . .
Font web yang telah di CSS untuk beberapa waktu, tetapi hanya diterapkan di IE dan hanya dengan beberapa font yang dimuat DRM. Sekarang kita tidak terbatas pada empat font buruk yang datang dengan Windows dan yang tidak dimiliki orang lain!

Itu luar biasa! Fitur-fitur ini tidak menyelesaikan masalah tata letak, tetapi mereka memang memecahkan masalah estetika yang digunakan para desainer untuk bekerja dengan canggung menggunakan banyak gambar dan / atau JavaScript. Ini berarti lebih sedikit unduhan dan lebih sedikit gambar yang digunakan daripada teks, yang cukup bagus untuk web.

Ironi yang hebat adalah bahwa efek desain ini keluar dari mode segera, dan sekarang kita kembali ke persegi panjang datar.

Awalan vendor neraka di browser

Sayang! Dunia masih tidak baik-baik saja.

Beberapa alat baru ini pada awalnya dikembangkan oleh pembuat browser dan diawali. Beberapa yang kemudian dikembangkan oleh komite CSS, kemudian diimplementasikan oleh browser ketika desain masih dalam pengembangan. Jadi ada awalan di sini juga.

Dan neraka awalan dimulai , yang berlanjut hingga hari ini.

Mozilla -moz-border-radius, oleh karena itu, ketika Safari menerapkannya, ia menyebutnya -webkit-border-radius("WebKit" adalah nama fork Apple KHTML). Kemudian spesifikasi CSS 3 distandarisasi dan menamainya sederhana border-radius. Ini berarti bahwa jika Anda ingin menggunakan batas bulat, Anda benar-benar perlu menjabarkan tiga aturan:

element {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

Dua yang pertama sebenarnya termasuk efek di browser saat ini, dan yang terakhir terdaftar untuk masa depan: ketika browser menerapkan aturan nyata dan menjatuhkan awalan, itu akan berlaku.

Anda harus melakukan ini setiap saat, karena CSS bukan bahasa pemrograman dan tidak memiliki makro, fungsi, atau sejenisnya. Kadang-kadang Opera dan IE memperkenalkan implementasi mereka sendiri dengan awalan -o-dan -ms-, sebagai hasilnya, jumlah total garis mencapai lima. Dengan gradien itu menjadi jauh lebih buruk; sintaks melewati sejumlah revisi serius yang tidak kompatibel, sehingga Anda bahkan tidak bisa mengandalkan menyalin / menempel dan mengubah nama properti!

Dan banyak desainer yang gagal. Saya tidak bisa menyalahkan mereka terlalu banyak; Maksudku, itu menyebalkan. Tetapi banyak halaman mengindikasikan hanya formulir awalan, bukan final, jadi browser harus mempertahankan formulir awalan lebih lama dari yang mereka inginkan untuk tidak merusak apa pun. Dan jika bentuk awalan masih berfungsi, dan Anda terbiasa menggunakannya, maka mungkin Anda tidak benar-benar membutuhkan opsi universal.

Lebih buruk lagi, beberapa hanya akan menggunakan formulir yang berfungsi di browser favorit mereka. Hal-hal menjadi sangat buruk dengan munculnya browser web seluler. Browser bawaan di iOS dan Android adalah Safari (WebKit) dan Chrome (awalnya WebKit, sekarang fork), jadi Anda hanya perlu awalan -webkit-. Yang membuat Mozilla lebih sulit ketika merilis Firefox untuk Android.

Ingat kegagalan dengan IE 6? Disini kita lagi! Situasinya sangat buruk sehingga Mozilla akhirnya memutuskan untuk mengimplementasikan sejumlah fitur -webkit-yang masih didukung bahkan di desktop Firefox. Situasinya sangat bodoh sehingga Firefox sekarang hanya mendukung beberapa efek melalui properti ini, seperti -webkit-text-stroke , yang tidak terstandarisasi.

Selain itu, mesin Chrome bercabang saat ini disebut Blink, jadi secara teknis tidak boleh menggunakan properti -webkit-. Namun demikian. Setidaknya ini tidak seburuk string agen pengguna yang membingungkan .

Sekarang pencipta browser sebagian besar telah meninggalkan awalan; sebaliknya, mereka menyembunyikan fungsi eksperimental di belakang bendera (oleh karena itu, mereka hanya akan bekerja pada mesin pengembangan yang memaksanya aktif). Fitur-fitur baru secara teoritis harus lebih kecil dan lebih mudah distabilkan.

Seluruh kekacauan ini mungkin telah menjadi faktor pendorong yang sangat besar untuk pengembangan Sass dan KURANG , dua bahasa yang menghasilkan kode CSS (preprosesor). Mereka memiliki tujuan yang sangat mirip: keduanya menambahkan variabel, fungsi dan beberapa bentuk makro ke CSS, yang memungkinkan Anda untuk mengecualikan banyak pengulangan, peramban peramban dan omong kosong lainnya dari kode Anda. Sial, saya masih menggunakan SCSS sendiri , meskipun penggunaan keseluruhan industri secara bertahap menurun.

Flexbox

Tapi kemudian, seolah-olah seorang malaikat turun dari surga ... flexbox .

Flexbox telah ada untuk waktu yang sangat lama - dukungan parsial diduga telah kembali di Firefox 2, sudah di tahun 2006! Dia mengalami beberapa revisi yang tidak kompatibel dan butuh waktu lama untuk menstabilkan. Maka IE tidak dapat mengimplementasikan dukungan selama bertahun-tahun, dan Anda tidak ingin bergantung pada tata letak yang hanya berfungsi untuk setengah dari audiens Anda. Hanya relatif baru (2015? Nanti?) Flexbox mendapat dukungan luas yang cukup untuk penggunaan yang aman. Dan saya bersumpah bahwa saya masih bertemu orang-orang yang Safari-nya tidak mengenalinya sama sekali tanpa awalan, meskipun Safari tampaknya telah menjatuhkan awalan-awalannya lima tahun lalu ...

Bagaimanapun, flexbox adalah implementasi CSS dari alat tata letak GUI yang cukup umum: Anda memiliki orang tua dengan beberapa anak, dan orang tua memiliki beberapa ruang kosong, dan secara otomatis dibagi di antara anak-anak. Dan itu menempatkan benda di samping satu sama lain .

Gagasan umum adalah bahwa browser menghitung berapa banyak ruang kosong yang dimiliki orang tua dan “ukuran awal” setiap anak, menghitung berapa banyak ruang tambahan yang ada, dan mendistribusikannya sesuai dengan fleksibilitas setiap anak. Bayangkan bilah alat: Anda dapat memberikan ukuran tetap pada setiap tombol (flex 0), tetapi tambahkan spacer yang membagi ruang yang tersisa secara merata, jadi beri mereka flex 1.

Setelah ini selesai, Anda juga akan memiliki beberapa opsi untuk opsi yang nyaman: Anda dapat mendistribusikan ruang tambahan di antara anak - anak, Anda dapat meregangkan mereka dengan ketinggian yang sama atau menyelaraskannya dengan cara yang berbeda, Anda bahkan dapat memindahkannya ke beberapa baris jika semuanya tidak cocok!

Dengan ini, kami dapat lebih mengoptimalkan grid thumbnail kami :

.thumbnail-grid {
    display: flex;
    flex-wrap: wrap;
}
.thumbnail-grid li {
    flex: 1 0 250px;
}

Ini hanya keajaiban. Anda bisa langsung lupa inline-block. Kode ini mengekspresikan dengan sangat jelas apa yang kita butuhkan.

…hampir. Dia masih memiliki masalah bahwa sel yang terlalu lebar akan merobek kisi, karena ini masih berupa baris horizontal, dipindahkan ke beberapa garis independen. Tapi ini masih cukup keren dan memecahkan sejumlah masalah tata letak lainnya. Ini mungkin sudah cukup. Kalau saja ...

saya akan mengatakan bahwa pengenalan besar-besaran flexbox mengantar era modern CSS. Hanya ada satu masalah yang belum terpecahkan ....

Kematian IE yang lambat dan menyakitkan

IE 6 meninggalkan pasar untuk waktu yang sangat lama. Sampai awal 2010 atau lebih, itu tidak mungkin jatuh di bawah 10% dari pasar (masih sangat besar).

Firefox mencapai versi 1.0 pada akhir 2004. IE 7 keluar hanya dua tahun kemudian, ia hanya menawarkan perbaikan sederhana, menderita masalah kompatibilitas dengan situs untuk IE 6, dan banyak pengguna IE 6 (sebagian besar pengguna yang tidak berpengalaman) tidak melihat alasan untuk pembaruan sama sekali. Vista hadir dengan IE 7, tetapi Vista ternyata menjadi semacam kegagalan - saya tidak percaya bahwa sepanjang hidup saya sudah dekat dengan menyalip XP.

Faktor-faktor lain termasuk kebijakan TI perusahaan, yang sering kali berbentuk "tidak pernah memperbarui apa pun" - dan sering karena alasan yang baik, karena saya mendengar cerita yang tak ada habisnya tentang aplikasi internal yang hanya berfungsi di IE 6 untuk semua jenis alasan menakutkan. Lalu ada semua Korea Selatan , yang secara hukum diharuskan untuk menggunakan IE 6 karena mereka mengabadikan dalam undang-undang beberapa persyaratan keamanan yang hanya dapat diimplementasikan menggunakan kontrol ActiveX di IE 6.

Oleh karena itu, jika Anda mendukung situs web yang digunakan - atau lebih buruk, diperlukanuntuk digunakan - oleh orang-orang dari bisnis atau dari negara lain, Anda cukup banyak terjebak dengan dukungan untuk IE 6. Orang yang membuat alat pribadi dan situs web kecil segera meninggalkan kompatibilitas IE 6 dan menampilkan spanduk yang semakin tidak menyenangkan untuk situs web pada pengguna IE 6 ... Tetapi jika Anda seorang pengusaha, bagaimana cara menjelaskan kehilangan instan 20% dari audiens potensial? Hanya bekerja lebih keras!

Selama bertahun-tahun, stres telah tumbuh seiring CSS menjadi semakin fungsional dan IE 6 tetap menjadi jangkar. Dia masih tidak mengerti PNG alphatanpa penyelesaian, dan sementara itu, kami memiliki fungsi yang semakin penting, seperti video asli di HTML5. Solusinya menjadi semakin membingungkan, dan daftar fungsi yang tidak bisa Anda gunakan semakin lama. Saya akan menunjukkan seperti apa blog saya di IE 6, tetapi Anda bahkan tidak mungkin terhubung - TLS yang didukungnya sangat kuno dan rusak sehingga sudah dinonaktifkan di sebagian besar server!

Permintaan terpisah datang dari pengembang individual dari tim YouTube. Tanpa meminta izin siapa pun, pada Juli 2009 mereka menambahkan spanduk peringatan yang memohon pengguna IE 6 untuk beralih ke sesuatulain, karena dukungan browser lama akan segera berakhir. Dalam satu bulan, pangsa global lalu lintas IE6 turun lebih dari 10%. Tidak semua pahlawan memakai jas hujan.

Saya akan menandai awal dari akhir IE6 hari itu ketika YouTube benar-benar mematikan dukungan untuk IE 6. Ini terjadi pada 13 Maret 2010, hampir sembilan tahun setelah rilis versi browser ini. Saya tidak tahu seberapa besar pengaruh YouTube terhadap pengguna korporat atau pemerintah Korea Selatan, tetapi penolakan perusahaan web besar untuk mendukung seluruh browser mengirimkan pesan yang cukup kuat.

Tentu saja, ada versi lain dari IE, dan banyak dari mereka sendiri yang berbeda. Tetapi masing-masing mengikuti menjadi kurang menyakitkan, dan sekarang Anda tidak perlu berpikir terlalu banyak tentang pengujian di IE (sekarang Edge). Sudah waktunya bagi Microsoft untuk meninggalkan mesin rendernya sendiri dan beralih ke klon Chrome.

Sekarang

CSS sangat bagus sekarang. Anda tidak perlu melakukan peretasan aneh hanya dengan meletakkan objek di dekatnya. Alat pengembangan peramban sekarang sudah ada di dalamnya dan sangat mengagumkan - Firefox mulai secara khusus memperingatkan Anda ketika beberapa properti CSS tidak berpengaruh karena nilai dari properti lain! Efek samping implisit yang tidak jelas seperti "susun konteks" sekarang dapat disetel seperti properti secara eksplisit isolation: isolate.

Bahkan, izinkan saya daftar semua yang terlintas dalam pikiran tentang fitur CSS modern. Ini bukan panduan untuk semua kemungkinan penggunaan gaya, tetapi jika pengetahuan CSS Anda belum diperbarui sejak 2008, saya harap ini akan meningkatkan selera Anda. Dan semua ini hanyalah CSS! Begitu banyak yang sebelumnya tidak mungkin, menyakitkan, atau diperlukan plug-in canggung sekarang didukung pada awalnya - audio, video, gambar tangan bebas, rendering 3D ... belum lagi peningkatan ergonomis besar untuk JavaScript.

Tata letak

Wadah kisi dapat melakukan hampir semua yang dilakukan tabel, dan bahkan lebih, termasuk secara otomatis menentukan jumlah kolom. Ini sangat menakjubkan. Lebih lanjut tentang ini di bawah ini.

Kontainer flexbox menguraikan anak-anaknya menjadi baris atau kolom, memungkinkan semua orang untuk menyatakan ukuran default mereka dan berapa banyak ruang yang ingin mereka gunakan. Anda dapat membungkus wadah-wadah ini, mengatur ulang anak-anak tanpa mengubah urutan sumbernya, dan menyelaraskan anak-anak dengan beberapa cara.

Kolom dapat membagi teks menjadi beberapa kolom.

Propertibox-sizingmemungkinkan Anda untuk memilih model wadah IE untuk masing-masing elemen jika Anda ingin seluruh elemen menempati jumlah ruang yang tetap, dan batas dan lekukan dikurangi dari total lebar .

display: contentsmembuang konten elemen ke elemen induknya, seolah-olah tidak ada sama sekali. display: flow-root- Ini pada dasarnya adalah perbaikan otomatis, hanya satu dekade kemudian.

widthsekarang dapat diatur ke min-content, max-contentatau fungsi fit-content()untuk perilaku yang lebih fleksibel.

white-space: pre-wrapmempertahankan ruang, tetapi memecah garis di mana perlu untuk menghindari meluap. Juga bermanfaat pre-line, yang memangkas ruang menjadi satu, tetapi mempertahankan baris baru yang sebenarnya.

text-overflowmemotong teks verbose menggunakan ellipsis (atau karakter khusus) ketika batas terlampaui, dan tidak hanya memotongnya. Juga dalam spesifikasi adalah fungsi menyembunyikan teks (fade out), tetapi belum diimplementasikan.

shape-outsidemengubah bentuk aliran teks. Ia bahkan dapat menggunakan saluran alfa gambar sebagai formulir.

resizememberikan elemen arbitrer deskripsi ukuran (jika telah melimpah).

writing-modemenetapkan arah surat itu. Jika desain Anda harus beroperasi dalam beberapa mode, beberapa properti CSS mendukung ini, Anda dapat menggunakannya sebagai alternatif untuk properti standar: inset-blockdan inset-inlineuntuk penentuan posisi, block-sizedan inline-sizeuntuk lebar / tinggi, border-blockdan border-inlineke tepi, dan properti serupa dengan indentasi.

Estetika

Transisi CSS dengan mulus menginterpolasi nilai setiap kali berubah, apakah karena efek tipe :hoveratau, misalnya, kelas yang ditambahkan dari JavaScript. Animasi CSS serupa, tetapi mainkan animasi yang sudah ditentukan sebelumnya secara otomatis. Keduanya dapat menerapkan sejumlah fungsi "kehalusan" yang berbeda .

border-radiusbulatkan sudut-sudut wadah. Semua sudut dapat memiliki ukuran yang berbeda, dan juga bisa bulat atau elips. Kurva juga berlaku untuk perbatasan, latar belakang, dan bayangan persegi panjang.

Bayangan kontainer dapat digunakan untuk efek jelas menciptakan bayangan. Anda juga dapat menggunakan beberapa bayangan dan bayangan insetuntuk berbagai efek pintar.

text-shadowmelakukan apa yang dikatakannya, meskipun Anda juga bisa menambahkan beberapa bayangan untuk membuat semacam garis besar teks.

transformmemungkinkan Anda untuk menerapkan transformasi multi-langkah sewenang-wenang ke elemen - yaitu, skala, memutar, memiringkan, memindahkan dan / atau melakukan transformasi perspektif tanpa mempengaruhi tata letak.

filter(berbeda dari IE 6) menawarkan beberapa filter visual khusus yang dapat diterapkan pada suatu elemen. Sebagian besar dari mereka berubah warna, tetapi ada juga blur(), dan drop-shadow()(tidak seperti box-shadow, itu diterapkan pada pikiran elemen eksternal, dan bukan pada wadahnya).

linear-gradient(). radial-gradient(), baru dan kurang didukung conic-gradient(), opsi merekarepeating-* - Semua dari mereka membuat gambar gradien dan dapat digunakan di mana saja di CSS di mana gambar yang diharapkan, biasanya seperti background-image.

scrollbar-colormengubah warna bilah gulir, dengan efek samping yang tidak menyenangkan dari kecepatan gulir yang jauh lebih rendah di browser saat ini.

background-size: coverdancontain mereka akan secara proporsional skala gambar latar belakang sehingga menjadi cukup besar untuk benar-benar menutupi elemen (bahkan jika itu dipotong), atau cukup kecil untuk masuk ke dalamnya (bahkan jika elemen tidak menutupi seluruh latar belakang).

object-fit Adalah ide yang serupa, tetapi untuk objek lain seperti <img>. object-positionSeperti pekerjaan yang sesuai background-position.

Dimungkinkan untuk menggunakan beberapa latar belakang, yang sangat berguna untuk gradien - Anda dapat menumpuk beberapa gradien, gambar latar belakang lainnya dan warna solid di bagian bawah.

text-decorationmenjadi lebih aneh dari sebelumnya; Sekarang Anda dapat mengatur warna garis dan menggunakan beberapa jenis garis yang berbeda, termasuk garis putus-putus, putus-putus dan bergelombang.

Penghitung CSS dapat digunakan untuk penomoran elemen yang sewenang-wenang, memberikan kemungkinan menggunakan <ol> pada set elemen apa pun.

Elemen pseudo ::markermemungkinkan Anda menyesuaikan dgn mode wadah penanda item daftar atau bahkan sepenuhnya menggantinya dengan penghitung kustom. Dukungan browser tidak lengkap tetapi membaik. Begitu pula aturannya@counter-stylemengimplementasikan gaya penghitung yang sama sekali baru (misalnya, 1 2 3, i ii iii, ABC, dll.) yang dapat Anda gunakan di mana saja, meskipun sejauh ini hanya Firefox yang mendukungnya.

image-set()menyediakan daftar gambar yang mungkin dan memungkinkan browser untuk memilih yang paling sesuai berdasarkan kepadatan piksel layar pengguna.

@font-facemendefinisikan font yang dapat diunduh dari sumber eksternal, meskipun Anda dapat menggunakan Google Font .

pointer-events: nonemembuat elemen sepenuhnya mengabaikan mouse; itu tidak menanggapi panduan, dan klik langsung ke elemen di bawah ini.

image-renderingdapat mengubah metode interpolasi gambar ke tetangga terdekat, meskipun dukungan browser masih heterogen, dan Anda mungkin juga perlu mengaktifkan beberapa properti khusus browser.

clip-pathmemotong elemen ke bentuk sewenang-wenang. Ada juga maskmasker alpha yang sewenang-wenang, tetapi dukungan browser tidak seragam, dan ini biasanya merupakan prosedur yang agak rumit.

Sintaks dan lainnya

@supportsmemungkinkan Anda untuk menulis kode-CSS yang berbeda tergantung pada apa yang didukung browser, meskipun saat ini jauh dari berguna seperti pada 2004.

A > Bmemilih anak langsung. A + Bmemilih saudara dan saudari. A ~ Bmemilih saudara dan saudari langsung (berdasarkan unsur). Kurung kotak dapat melakukan banyak hal untuk dipilih berdasarkan atribut; yang paling jelas adalah input[type=checkbox], meskipun hal-hal menarik dapat dilakukan dengan bagian yang sesuai <a href>.

Sekarang ada banyak kelas pseudo. Banyak dari mereka adalah untuk elemen bentuk: :enableddan :disabled; :checkeddan :indeterminate(juga berlaku untuk <option>); :requireddan :optional; :read-writedan :read-only; :in-range/ :out-of-rangedan :valid/:invalid(untuk digunakan dengan validasi formulir sisi-klien HTML5); :focusdan :focus-within; dan :default(yang memilih tombol form default dan kotak centang, tombol radio dan <option>') yang telah ditentukan sebelumnya .

Untuk aplikasi ke elemen-elemen tertentu dalam satu set elemen terkait miliki :first-child, :last-childserta :only-child; :first-of-type, :last-of-typedan :only-of-type(di mana "ketik" berarti nama tag); adalah :nth-child(), :nth-last-child(), :nth-of-type()dan :nth-last-of-type()(untuk memilih masing-masing unsur kedua, ketiga, dan sebagainya).

:not()membalik pemilih. :emptyMemilih elemen tanpa anak-anak dan tanpa teks. :targetmemilih elemen yang melompati fragmen URL (misalnya, jika bilah alamat ditampilkanindex.html#foo, pada saat yang sama, elemen yang identifier-nya sama dengan dipilih foo).

::beforedan ::aftersekarang dengan dua titik dua untuk menunjukkan bahwa mereka membuat elemen semu, dan tidak hanya menentukan area pemilih yang mereka lampirkan. ::selectionmenyesuaikan bagaimana teks yang dipilih ditampilkan; ::placeholderMengubah tampilan teks pengganti (dalam bidang teks).

Kueri media melakukan banyak hal sehingga halaman Anda dapat beradaptasi tergantung pada bagaimana dilihatnya. Kueri media prefers-color-schememenginformasikan apakah sistem pengguna diinstal pada topik terang atau gelap, sehingga Anda dapat mengonfigurasinya secara otomatis.

Anda dapat menulis warna transparan seperti #rrggbbaaatau#rgba, serta menggunakan fungsi rgba()dan hsla().

Sudut dapat digambarkan sebagai pecahan dari lingkaran penuh dengan turn. Tentu saja, degdan rad(dan grad) juga tersedia.

Variabel CSS (secara resmi "properti khusus") memungkinkan Anda untuk menetapkan nilai-nilai bernama kustom yang dapat digunakan di mana saja. Anda dapat menggunakan ini untuk mengurangi jumlah manipulasi CSS yang diperlukan dalam JavaScript (misalnya, untuk mengecat ulang bagian halaman yang kompleks dengan mengatur variabel CSS alih-alih secara manual mengatur sejumlah properti), atau untuk memiliki komponen generik yang merespons variabel yang diatur oleh komponen induk.

calc()menghitung ekspresi sewenang-wenang dan secara otomatis memperbaruinya (walaupun kebutuhan untuk perhitungan seperti itu sebagian menghilangkanbox-sizing)

vw, vh, vmin, Danvmax memungkinkan Anda untuk menentukan panjang sebagai persentase dari lebar atau tinggi dari viewport, atau mana yang lebih besar / kurang.

Fuh! Saya yakin saya sudah banyak lupa, dan kolega saya akan melengkapi daftar di komentar. Sekarang saya dapat melarikan diri dari melihat MDN dan pergi ke bagian artikel terakhir yang menyenangkan.

Kisi thumbnail modern

Pada akhirnya, kita sampai pada cara terakhir dan obyektif yang benar untuk membangun kotak thumbnail: menggunakan kotak CSS . Pilihan yang tepat dapat dipahami bahkan karena memiliki kisi-kisi dalam namanya. Fitur-fitur modern CSS cukup bagus: mereka membiarkan Anda mengatakan apa yang Anda inginkan - dan itu akan bekerja seperti yang Anda katakan, daripada menggunakan mantra voodoo yang tidak jelas.

Dan inilah betapa sederhananya:

.thumbnail-grid {
    display: grid;
    grid: auto-flow / repeat(auto-fit, minmax(250px, 1fr));
}

Selesai! Ini memberi kita kotak . Dan Anda memiliki segudang opsi lain untuk dimainkan bersama mereka, sama seperti flexbox, tetapi ini adalah ide utamanya. Anda bahkan tidak perlu menata elemennya sendiri; sebagian besar pekerjaan tata letak dilakukan dalam wadah.

Properti Singkatan gridterlihat sedikit menakutkan, tetapi hanya karena fleksibel. Dia mengatakan: mengisi grid satu baris pada satu waktu, menghasilkan garis sebanyak yang diperlukan; buat sebanyak 250px kolom sesuai kebutuhan, dan bagi ruang yang tersisa di antara keduanya secara merata.

Kotak CSS juga nyaman untuk menempatkan <dl>, yang secara historis sangat memusingkan: satu <dl> berisi sejumlah <dt>, diikuti oleh sejumlah <dd> (termasuk nol). Sebelumnya, satu-satunya cara untuk gaya itufloat, Yang berarti lebar tetap. Sekarang Anda bisa menentukan <dt> di kolom pertama dan <dd> di kolom kedua, dan kotak CSS akan menangani sisanya.

Bagaimana tampilannya di halaman sungguhan? Cerita itu dengan sidebar? Lihat betapa sederhananya:

body {
    display: grid;
    grid-template:
        "header         header          header"
        "left-sidebar   main-content    right-sidebar"
        "footer         footer          footer"
        / 1fr           6fr             1fr
    ;
}
body > header {
    grid-area: header;
}
#left-sidebar {
    grid-area: left-sidebar;
}
/* ... etc ... */

Selesai Mudah. Juga tidak masalah untuk mencantumkan detail di markup.

Di samping itu

Web masih sedikit bencana. Banyak yang bahkan tidak tahu bahwa flexbox dan grid sekarang didukung hampir secara universal ; tetapi mengingat berapa lama waktu yang dibutuhkan untuk beralih dari spesifikasi awal ke implementasi yang luas, saya tidak dapat menyalahkan mereka. Baru kemarin saya melihat situs kecil yang baru, yang sebagian besar terdiri dari daftar besar "thumbnail" dari berbagai lebar, dan menggunakan pelampung! Bahkan tidak inline-block! Saya tidak tahu siapa yang mengajari mereka peretasan yang rumit ini dan mengapa dia tidak mengatakan sepatah kata pun tentang flexbox.

Tapi jauh lebih buruk adalah bahwa saya masih sering menemukan situs yang membuat seluruh tata letak menggunakan JavaScript . Jika Anda menggunakan pemblokir skrip uMatrixPengalaman pertama Anda adalah sekelompok teks yang tumpang tindih dengan sekelompok teks lainnya. Apakah ini benar-benar langkah mundur? Apakah judul dan bilah samping yang diposisikan dengan benar hanya ketika skrip dieksekusi? Ini tidak seperti memuat halaman tanpa CSS - dalam HTML biasa, tidak ada yang bisa tumpang tindih secara default! Anda harus secara sengaja menunjukkan untuk melakukannya!

Dan kemudian ada web seluler, yang, terlepas dari semua niat baik itu, ternyata pada dasarnya merupakan ide yang buruk. Idenya adalah menggunakan kueri media CSS di layar ponsel yang cocok dengan situs biasa, tetapi sebaliknya sebagian besar situs utama memiliki versi seluler yang sepenuhnya terpisah. Ini berarti bahwa salah satu situs seluler tidak memiliki banyak fungsi penting, dan Anda harus menavigasinya dengan canggung di ponsel Anda, atau versi lengkap dari situs tersebut penuh dengan omong kosong yang tidak diperlukan oleh siapa pun.

Bahkan dalam versi Google Docs / Sheets / etc. untuk Android, misalnya, hanya 5% dari kemampuan versi web. Saya tidak tahu apa yang harus saya lakukan dengannya.

Opsi yang tidak terpenuhi untuk masa depan

Saya tidak tahu bagaimana CSS akan berkembang lebih jauh, terutama sekarang karena flexbox dan kisi telah menyelesaikan semua masalah kami. Samar-samar sadar bahwa beberapa pekerjaan sedang berlangsung pada dukungan matematika yang lebih luas, dan mungkin beberapa fungsi untuk mengubah warna, seperti di Sass. Ada Lukisan API yang memungkinkan Anda untuk menghasilkan latar belakang dengan cepat menggunakan JavaScript menggunakan Kanvas API, yang ... cukup keren. Rupanya, dalam spesifikasi saya sudah bisa attr()menghitung nilai properti apa pun. Ini tampaknya keren dan bahkan memungkinkan Anda untuk mengimplementasikan tabel HTML sepenuhnya dalam CSS, tetapi Anda dapat melakukan hal yang sama dengan variabel. Maksudku, well, "properti khusus" (nama resmi). Saya lebih peduli :is()dengan daftar pemilih yang cocok dan subgriduntuk subnet bersarang.

Jauh lebih mudah untuk membuat daftar hal-hal yang ada dalam rencana, tetapi belum dilaksanakan.

display: run-in telah menjadi bagian dari CSS sejak versi 2 (kembali ke-98), tetapi sebagian besar tidak didukung. Idenya adalah bahwa satu blok dimasukkan ke blok berikutnya. Misalnya, kode ini:
```
<h2 style="display: run-in;">Title</h2>
<p>Paragraph</p>
<p>Paragraph</p>
```
Sesuai dengan masalah ini:

Judul Paragraf
Paragraf

Dan, hmm, saya mulai mengerti mengapa ini tidak didukung. Dulu ada di WebKit, tetapi mungkin sangat tidak bisa dioperasi sehingga dihapus enam tahun lalu.
« » 2000-, , . , ( ), . , , , , .

, Chrome , .
, CSS , CSS -. 2 :

… , .

, . . Firefox userContent.css URL- , .

, , Stylish, , (, - , . Stylus).

(, ) . :checked. :

<label><input type="checkbox"> Description of what this does</label>

… CSS <label>, . () jQuery :has():

/* checkbox label turns bold when checked */
label:has(input:checked) {
    font-weight: bold;
}

CSS 3, , , , . , , , , “”. :

label:subject input:checked {
    font-weight: bold;
}

!:

!label input:checked {
    font-weight: bold;
}

, , , , … :has()! , JavaScript, , , . , , .

<style scoped> , CSS <style> . , (, ) CSS . , , DOM .
, -, , HTML… , JavaScript , , . JS. .
<blink> <marquee>. RIP. , CSS-.

Kamu masih di sini? Semuanya sudah berakhir sekarang. Waktunya pulang.

Dan, mungkin, berikan kontribusi Anda pada konfrontasi dengan monokultur Blink menggunakan Firefox , termasuk di telepon , jika karena alasan tertentu Anda tidak menggunakan iPhone, yang umumnya melarang mesin peramban lain. Ini jauh lebih buruk daripada apa pun yang pernah dilakukan Microsoft, tetapi kami hanya menerimanya karena suatu alasan ...

CSS lama dan baru. Sejarah Desain Web