Bahasa yang hampir menjadi CSS

Halo, Habr! Saya membawa perhatian Anda terjemahan artikel Bahasa Yang Hampir Menjadi CSS oleh Zack Bloom tentang bahasa yang bisa menjadi CSS, jika sejarahnya sedikit berbeda.

, ( ) , ( ) , TeX, Microsoft Word . : ", ".



— , 1994

Ketika Tim Berners-Lee mengumumkan pembuatan HTML pada tahun 1991, tidak ada cara untuk menata halaman. Cara tag HTML dirender ditentukan oleh browser dan sangat dipengaruhi oleh preferensi pengguna. Namun, sepertinya ide yang bagus untuk membuat alat standar yang memungkinkan laman untuk "memberi petunjuk" tentang perenderan gaya yang mereka sukai.



Tetapi sebelum munculnya CSS, itu masih lima tahun, dan sepuluh tahun lagi sebelum itu sepenuhnya diimplementasikan. Itu adalah periode kerja keras dan inovasi yang mengarah pada penciptaan banyak gaya bersaing yang bisa menjadi standar.



Meskipun bahasa-bahasa ini jelas tidak banyak digunakan saat ini, menarik bagi saya untuk merenungkan seperti apa dunia ini nantinya. Yang lebih mengejutkan, banyak dari bahasa ini memiliki fitur yang dengan senang hati digunakan oleh pengembang dalam CSS bahkan hingga hari ini.

Kandidat pertama

Pada awal 1993, browser Mosaic bahkan tidak mencapai versi 1.0, dan semua browser yang ada hanya bekerja dengan HTML. Tidak ada cara untuk menentukan gaya HTML, jadi Anda melihat tag <h1>seperti cara browser memutuskan untuk menampilkannya.



Pada bulan Juni tahun yang sama, Robert Reisch mengajukan proposal ke milis www-talk untuk membuat "format yang mudah diurai untuk menyampaikan informasi gaya bersama dengan dokumen web," yang disebutnya RRP.

@BODY fo(fa=he,si=18)

Cukup dimaafkan jika Anda tidak memahami fungsi kode ini. Di era pra-gzip, ketika kecepatan koneksi biasanya kurang dari 14,4 kbps, masuk akal untuk menjaga konten format baru ini seringkas mungkin. Secara khusus, aturan ini memilih faHelvetica ( he) sebagai jenis font ( ) dan menyetel ukuran font ( si) menjadi 18 poin.



Anehnya, proposal Reisch kekurangan unit, semua angka diinterpretasikan berdasarkan konteks (misalnya, semua ukuran font dalam poin). Ini karena RRP dirancang lebih sebagai "kumpulan tip dan trik untuk perender" daripada spesifikasi. Ini dianggap perlu karena stylesheet yang sama seharusnya berfungsi di browser mode teks biasa (sepertiLynx ), dan di browser grafis yang semakin populer.





Screenshot dari Browser Lynx



Menariknya, RRP menyertakan cara untuk menentukan tata letak kolom - ini tidak mungkin dilakukan di CSS hingga 2011. Misalnya, tiga kolom, setiap lebar 80 unit, akan terlihat seperti ini:

@P co(nu=3,wi=80)

Agak sulit untuk diurai, tetapi mungkin tidak jauh lebih sulit daripada white-space: nowrap.



Perlu dicatat bahwa RRP tidak mendukung "cascading" apa pun yang kami kaitkan dengan lembar gaya saat ini. Dokumen apa pun tidak boleh memiliki lebih dari satu lembar gaya aktif pada satu waktu, yang cukup logis dalam hal dokumen gaya, meskipun hal itu tidak biasa bagi kita saat ini.



Mark Andreessen (pencipta Mosaic, yang akhirnya menjadi browser paling populer) tahu tentang proposal RRP, tetapi tidak pernah menerapkannya di Mosaic. Sebagai gantinya, Mosaic segera mengambil jalan menggunakan tag HTML untuk gaya (yang cukup tragis), menambahkan tag seperti <FONT>dan <CENTER>.

Viola dan Perang Browser Proto

“Lalu mengapa tidak menerapkan salah satu dari banyak proposal stylesheet di luar sana. Dengan struktur yang tepat, ini hampir akan menyelesaikan masalah sepenuhnya. "

Kemudian saya harus memberi tahu orang-orang, "Oke, Anda perlu belajar bahasa ini untuk menulis dokumen, dan kemudian belajar bahasa lain untuk membuat dokumen terlihat seperti yang Anda inginkan." Oh, mereka akan menyukainya.



- Mark Andreessen, 1994

Berlawanan dengan kepercayaan populer, Mosaic bukanlah browser grafis pertama. Itu didahului oleh ViolaWWW , browser grafis yang aslinya ditulis oleh Pei-Yuan Wei hanya dalam empat hari.





Tangkapan layar dari Viola Browser



Pei-Yuan membuat bahasa lembar gaya yang mendukung jenis struktur hierarki yang digunakan di CSS saat ini:

(BODY fontSize=normal
      BGColor=white
      FGColor=black
  (H1   fontSize=largest
        BGColor=red
        FGColor=white)
)

Dalam hal ini, kami menerapkan warna ke badan dokumen (badan) dan, khususnya, kami menata gaya H1yang ada di dalam badan. Alih-alih mengulang penyeleksi untuk mengontrol penyarangan ini, PWP menggunakan sistem tanda kurung yang membawa kita kembali ke sistem indentasi yang digunakan dalam bahasa seperti Stylus dan SASS, yang masih disukai beberapa pengembang daripada CSS saat ini. Ini berpotensi membuat sintaks PWP lebih baik setidaknya dalam satu hal daripada CSS, yang telah berkembang seiring waktu menjadi bahasa universal web.



PWP juga terkenal karena memiliki cara untuk merujuk ke stylesheet eksternal, yang masih kita gunakan sampai sekarang:

<LINK REL="STYLE" HREF="URL_to_a_stylesheet">

Sayangnya, ViolaWWW ditulis terutama untuk bekerja dengan Sistem X Window , yang hanya populer di sistem Unix. Ketika Mosaic di-porting ke Windows, itu dengan cepat membuat Viola menjadi debu.

Style sheets sebelum web

HTML adalah jenis hal yang hanya bisa disukai oleh seorang ilmuwan komputer. Ya, ini mengekspresikan struktur internal sebuah dokumen, tetapi dokumen tidak hanya database teks terstruktur; mereka memiliki dampak visual. HTML sepenuhnya menghancurkan kreativitas grafis yang mungkin dimiliki oleh pengembang dokumen.



- Roy Smith, 1993

Kebutuhan akan bahasa yang mampu mengekspresikan gaya dokumen jauh lebih tua daripada Internet itu sendiri.



Seperti yang mungkin Anda ketahui, HTML yang kami kenal pada awalnya didasarkan pada bahasa pra-Internet yang disebut SGML. Pada tahun 1987, Departemen Pertahanan AS memutuskan untuk menguji apakah SGML dapat digunakan untuk menyederhanakan penyimpanan dan pemindahan volume dokumentasi yang sangat besar. Seperti proyek pemerintah yang baik, hal pertama yang mereka lakukan adalah menemukan nama. Tim ini awalnya bernama tim Dukungan Logistik Berbantuan Komputer, lalu tim Akuisisi Berbantuan Komputer dan Dukungan Logistik, lalu, terakhir, inisiatif Akuisisi Berkelanjutan dan Dukungan Siklus Hidup. Bagaimanapun, inisialnya adalah CALS.



Tim CALS menciptakan bahasa untuk menata dokumen SGML yang disebut FOSI. Dia mempublikasikanspesifikasi bahasa yang sedetail mungkin. Itu termasuk favorit saya dari infografis paling tidak berarti yang pernah ada di web.



Satu aturan Internet yang tidak memiliki pengecualian adalah Anda selalu menyelesaikan lebih banyak jika Anda dapat membuktikan seseorang salah dalam prosesnya. Pada tahun 1993, hanya empat hari setelah proposal Pei-Yuan, Stephen Heaney menyarankan bahwa alih-alih menciptakan kembali roda, versi FOSI akan lebih cocok untuk menata web.



Dokumen FOSI itu sendiri ditulis dalam SGML, yang merupakan langkah yang cukup logis mengingat para pengembang web sudah terbiasa dengan versi SGML yang disebut HTML. Contoh dokumen terlihat seperti ini:

<outspec>
  <docdesc>
    <charlist>
      <font size="12pt" bckcol="white" fontcol="black">
    </charlist>
  </docdesc>
  <e-i-c gi="h1"><font size="24pt" bckcol="red", fontcol="white"></e-i-c>
  <e-i-c gi="h2"><font size="20pt" bckcol="red", fgcol="white"></e-i-c>
  <e-i-c gi="a"><font fgcol="red"></e-i-c>
  <e-i-c gi="cmd kbd screen listing example"><font style="monoser"></e-i-c>
</outspec>

Mungkin Anda tidak mengerti apa itu docdescatau charlist, sama seperti anggota yang tidak memahaminya www-talk. Satu-satunya informasi kontekstual adalah apa yang dimaksud dengan e-i-c"elemen dalam konteks". Namun, FOSI terkenal untuk pertama kalinya memperkenalkan unit pengukuran em, yang sekarang telah menjadi cara pengatur ukuran yang disukai di CSS.



Konflik bahasa yang dihasilkan sebenarnya sudah setua pemrograman itu sendiri. Itu adalah pertarungan antara sintaks gaya cadel fungsional dan sintaks dalam bahasa yang lebih deklaratif. Pei-Yuan sendiri mendeskripsikan sintaksnya sebagai "LISP-like", tetapi hanya masalah waktu sebelum versi LISP yang sebenarnya muncul di tempat kejadian.

Lembar gaya lengkap turing

Terlepas dari kompleksitasnya, FOSI sebenarnya dianggap sebagai solusi perantara untuk masalah format dokumen. Rencana jangka panjangnya adalah membuat bahasa berdasarkan Skema bahasa pemrograman fungsional, yang mampu mengimplementasikan transformasi dokumen paling kuat yang bisa dibayangkan. Bahasa ini bernama DSSSL. Mari beri penjelasan kepada salah satu pengembang bahasa, John Bosak:

Jangan salahkan DSSSL sebagai bahasa scripting. Ya, DSSSL adalah Turing lengkap; ya, itu adalah bahasa pemrograman. Tapi bahasa skrip (setidaknya dalam interpretasi saya tentang istilah) adalah prosedural; dan DSSSL jelas tidak. DSSSL berfungsi penuh dan sepenuhnya bebas dari efek samping. Tidak ada yang terjadi di lembar gaya DSSSL. Style sheet adalah salah satu fungsi besar yang nilainya merupakan deskripsi abstrak, tidak tergantung perangkat, dan non-prosedural dari dokumen yang diformat, sebagai spesifikasi (deklarasi, jika Anda ingin) dari wilayah yang akan dirender, diteruskan ke perender yang mendasarinya.

Dalam bentuknya yang paling sederhana, DSSSL memang merupakan bahasa gaya yang cukup logis:

(element H1
  (make paragraph
    font-size: 14pt
    font-weight: 'bold))

Karena ini adalah bahasa pemrograman, Anda bahkan dapat mendefinisikan fungsi di dalamnya:

(define (create-heading heading-font-size)
  (make paragraph
    font-size: heading-font-size
    font-weight: 'bold))

(element h1 (create-heading 24pt))
(element h2 (create-heading 18pt))

Dan gunakan konstruksi matematika saat menata gaya, misalnya, untuk membuat garis tabel menjadi bergaris:

(element TR
  (if (= (modulo (child-number) 2)
        0)
    ...   ;even-row
    ...)) ;odd-row

Untuk membuat Anda lebih iri, katakanlah DSSSL dapat memperlakukan nilai yang diwarisi sebagai variabel dan melakukan operasi matematika padanya:

(element H1
  (make paragraph
    font-size: (+ 4pt (inherited-font-size))))

Sayangnya, DSSSL memiliki cacat fatal yang umum terjadi pada semua bahasa bergaya Skema: terlalu banyak tanda kurung. Selain itu, spesifikasinya terlalu lengkap pada saat rilis final, yang mengintimidasi pengembang browser. Spesifikasi DSSSL mencakup lebih dari 210 properti bergaya individu.



Pekerjaan pengembangan lebih lanjut mengarah pada pembuatan XSL - bahasa transformasi dokumen yang sama berbelit-belit, tetapi jauh lebih populer.

Mengapa stylesheet menang

CSS tidak memiliki pemilih induk (cara untuk memberi gaya pada induk berdasarkan turunannya). Fakta ini sudah lama mengganggu pengguna Stack Overflow , namun ternyata ada alasan yang cukup bagus atas ketidakhadiran mereka. Pada masa-masa awal Internet, dianggap penting bahwa halaman dapat dirender sebelum dokumen dimuat sepenuhnya. Dengan kata lain, HTML atas halaman harus dapat dirender sebelum HTML akhir halaman dimuat sepenuhnya.



Memiliki pemilih induk berarti bahwa gaya perlu diperbarui saat dokumen HTML dimuat. Bahasa seperti DSSSL sepenuhnya dikesampingkan karena dapat melakukan operasi pada dokumen itu sendiri, yang tidak sepenuhnya tersedia pada saat rendering. Bert Bose adalah orang



pertama yang mengemukakan masalah ini pada Maret 1995 dan mengusulkan bahasa kerja untuk menyelesaikannya. Usulannya juga berisi versi awal emotikon "smiley" :-).



Bahasa itu sendiri agak "berorientasi objek" dalam sintaks:

*LI.prebreak: 0.5
*LI.postbreak: 0.5
*OL.LI.label: 1
*OL*OL.LI.label: A

Simbol itu .menunjukkan anak-anak terdekat, dan *leluhur.



Bahasa Bose memiliki properti menarik lainnya: Anda dapat menentukan cara kerja elemen seperti tautan di lembar gaya itu sendiri:

*A.anchor: !HREF

Dalam contoh di atas, kami menetapkan bahwa alamat navigasi elemen tautan adalah nilai dalam atributnya HREF. Gagasan bahwa perilaku elemen seperti tautan harus dikontrol telah populer di banyak proposal lain. Di era pra-JavaScript, tidak ada cara untuk mengontrol aspek-aspek ini, jadi tampaknya logis untuk memasukkannya ke dalam proposal ini.



Dalam salah satu draf bahasa fungsional, diusulkan pada tahun 1994 oleh seorang pria bernama S.M. Sperberg-McQueen, perilaku yang sama diterapkan secara fungsional:

(style a
  (block #f)     ; format as inline phrase
  (color blue)   ; in blue if you’ve got it
  (click (follow (attval 'href)))  ; and on click, follow url

Bahasanya juga memperkenalkan kata kunci contentsebagai cara untuk memanipulasi konten elemen HTML dari stylesheet. Konsep ini kemudian ditambahkan di CSS 2.1.

Seperti apa web itu

Sebelum berbicara tentang bahasa yang sebenarnya menjadi CSS, ada baiknya menyebutkan satu proposal bahasa lagi, jika hanya karena itu, dalam arti, adalah impian para pengembang web pertama.



PSL96 adalah, seperti namanya, versi 1996 dari Bahasa Spesifikasi Presentasi. Pada intinya, PSL terlihat seperti CSS:

H1 {
  fontSize: 20;
}

Namun, segalanya dengan cepat menjadi jauh lebih menarik. Misalnya, dimungkinkan untuk mengekspresikan posisi elemen tidak hanya bergantung pada size ( Width) yang diberikan padanya , tetapi juga pada ukuran true ( Actual Width) yang dirender di browser:

LI {
  VertPos: Top = LeftSib . Actual Bottom;
}

Anda bisa melihat dari contoh bahwa Anda juga bisa menggunakan saudara kiri sebagai pembatas.



Ekspresi Boolean juga bisa ditambahkan ke gaya. Berikut adalah contoh gaya hanya elemen jangkar yang memiliki href:

A {
  if (getAttribute(self, "href") != "") then
    fgColor = "blue";
    underlineNumber = 1;
  endif
}

Gaya ini dapat diperluas ke semua aspek, yang kita gunakan kelas hari ini:

LI {
  if (ChildNum(Self) == round(NumChildren(Parent) / 2 + 1)) then
    VertPos: Top = Parent.Top;
    HorizPos: Left = LeftSib.Left + Self.Width;
  else
    VertPos: Top = LeftSib.Actual Bottom;
    HorizPos: Left = LeftSib.Left;
  endif
}

Mendukung fungsi ini mungkin akan memungkinkan untuk akhirnya mewujudkan impian memisahkan konten dari gaya. Sayangnya, bahasa ini terlalu dapat dikembangkan, artinya, ada kemungkinan besar bahwa penerapannya akan sangat berbeda di browser yang berbeda. Selain itu, ia diterbitkan dalam serangkaian artikel di dunia ilmiah, dan bukan di milis www-talk, tempat sebagian besar pekerjaan konstruktif berlangsung. Itu tidak pernah diintegrasikan ke dalam browser populer manapun.

Hantu dari CSS masa lalu

Bahasa yang secara langsung dapat mengarah pada pembuatan CSS (setidaknya seperti namanya) adalah CHSS (Cascading HTML Style Sheets). Itu diusulkan pada tahun 1994 oleh Håkon W Lie.



Seperti kebanyakan ide bagus, proposal awal cukup gila.

h1.font.size = 24pt 100%
h2.font.size = 20pt 40%

Perhatikan persentase di akhir aturan. Persentase ini berarti seberapa besar "kepemilikan" style sheet saat ini melebihi nilai tersebut. Misalnya, jika lembar gaya sebelumnya h2memiliki ukuran font yang ditentukan 30ptuntuk 60%"kepemilikan", dan lembar gaya h2menentukan gayanya 20px 40%, maka kedua nilai tersebut dapat digabungkan berdasarkan persentase kepemilikannya untuk menghasilkan nilai sekitar 26pt.



Sangat dapat dimengerti mengapa proposal semacam itu dibuat di era halaman HTML dokumenter: desain seperti itu berdasarkan trade-off tidak akan dipahami dalam dunia berorientasi aplikasi kita. Bagaimanapun, itu muncul dengan ide dasar tentang perlunya struktur lembar gaya berjenjang. Dengan kata lain, gagasan bahwa beberapa lembar gaya diperlukan di halaman yang sama.



Dalam rumusan aslinya, ide ini secara umum dianggap penting karena memberikan kendali kepada pengguna akhir atas apa yang mereka lihat. Halaman asli dapat memiliki satu lembar gaya, dan pengguna web dapat memiliki lembar gaya mereka sendiri dan mereka dapat digabungkan untuk membuat halaman. Mendukung banyak stylesheet dipandang sebagai cara untuk menjaga kebebasan pribadi di web, bukan sebagai cara untuk mendukung pengembang (yang masih memberi kode tangan setiap halaman HTML).



Pengguna bahkan mungkin dapat mengontrol tingkat kontrol yang dia berikan pada rekomendasi penulis halaman; kontrol seperti itu dalam kalimat bahasa dijelaskan oleh skema ASCII:

       User                   Author
Font   o-----x--------------o 64%
Color  o-x------------------o 90%
Margin o-------------x------o 37%
Volume o---------x----------o 50%

Seperti banyak dari asumsi ini, proyek ini berisi fitur yang muncul di CSS hanya beberapa dekade kemudian, jika tidak sama sekali. Misalnya, ia memiliki kemampuan untuk menulis ekspresi logis berdasarkan lingkungan pengguna:

AGE > 3d ? background.color = pale_yellow : background.color = white
DISPLAY_HEIGHT > 30cm ? http://NYT.com/style : http://LeMonde.fr/style

Dalam visi sci-fi yang agak optimis di masa depan, diyakini bahwa browser akan mengetahui seberapa relevan setiap konten bagi pengguna, memungkinkannya untuk ditampilkan dalam ukuran yang lebih besar:

RELEVANCE > 80 ? h1.font.size *= 1.5

Kita semua tahu apa yang terjadi selanjutnya

Microsoft berkomitmen penuh untuk standar terbuka, terutama di Internet.



- John Ludeman, 1994

Haakon Lee terus bekerja untuk menyederhanakan proposalnya, dan bersama Bert Bose menerbitkan versi pertama spesifikasi CSS pada bulan Desember 1996. Dia akhirnya menulis tesis Ph.D tentang pembuatan CSS dan dokumen ini sangat membantu saya dalam menulis artikel.



Dibandingkan dengan banyak proposal lainnya, aspek penting dari CSS adalah kesederhanaannya. Mudah diurai, mudah ditulis dan dibaca. Seperti yang sering terjadi dalam sejarah Internet, teknologi yang paling mudah dikuasai pemula, dan bukan yang paling kuat untuk spesialis, menang.



Ini sendiri merupakan pengingat bagaimana inovasi acak bisa terjadi. Misalnya, dukungan untuk pemilih kontekstual (body ol li) hanya ditambahkan karena Netscape telah memiliki cara untuk menghapus batas dari gambar yang merupakan hyperlink, dan tampaknya perlu melakukan semua yang dapat dilakukan browser populer. Fungsinya sendiri menyebabkan penundaan yang signifikan dalam penerapan CSS, karena pada saat itu sebagian besar browser tidak menyimpan "tumpukan" tag saat mengurai HTML. Ini berarti parser perlu didesain ulang untuk mendukung CSS sepenuhnya.



Karena masalah ini (dan meluasnya penggunaan tag HTML non-standar untuk gaya), CSS tidak dapat digunakan hingga tahun 1997, dan tidak sepenuhnya didukung oleh browser apa pun hingga Maret 2000. Seperti yang akan diberitahukan oleh pengembang mana pun kepada Anda, dukungan browser sangat jauh dari memenuhi standar dan itu berubah hanya beberapa tahun yang lalu, lima belas tahun setelah CSS dirilis.

Netscape 4 CSS, <body>, , IE4 <body> , , CSS ? CSS. , IE4 , Netscape 4.



—

Internet Explorer 3 dikenal dirilis dengan dukungan CSS (agak mengerikan). Diputuskan bahwa untuk bisa bersaing di Netscape 4, bahasa ini juga harus didukung. Namun, alih-alih menggandakan upaya untuk menerapkan bahasa ketiga ini (setelah HTML dan JavaScript), diputuskan bahwa itu harus diterapkan dengan mengubah CSS menjadi JavaScript dan kemudian mengeksekusinya. Lebih buruk lagi, telah diputuskan bahwa Lembar Gaya JavaScript perantara ini harus tersedia untuk pengembang web .



Sintaksnya adalah JavaScript biasa dengan styling API yang ditambahkan:

tags.H1.color = "blue";
tags.p.fontSize = "14pt";
with (tags.H3) {
  color = "green";
}

classes.punk.all.color = "#00FF00"
ids.z098y.letterSpacing = "0.3em"

Bahkan dimungkinkan untuk menentukan fungsi yang nilainya dihitung saat menghadapi setiap kemunculan tag :

evaluate_style() {
  if (color == "red"){
    fontStyle = "italic";
  } else {
    fontWeight = "bold";
  }
}

tag.UL.apply = evaluate_style();

Ide untuk menyederhanakan garis pemisah antara gaya dan skrip cukup masuk akal, dan hari ini bahkan terlahir kembali di komunitas React .



JavaScript sendiri adalah bahasa yang sangat muda pada saat itu, tetapi berkat rekayasa balik, dukungan untuk itu ditambahkan di IE3 (dalam bentuk JScript). Masalah yang jauh lebih besar adalah bahwa komunitas sudah mendukung CSS pada saat itu, dan Netscape dipandang oleh sebagian besar komunitas standar sebagai pelanggar pada saat itu . Ketika Netscape mengusulkan JSSS ke komite standar, mereka tidak mau. Tiga tahun kemudian, Netscape 6 menjatuhkan dukungan untuk JSSS dan secara bertahap mati.

Apa yang bisa menunggu kita

Berkat kecaman publik dari W3C, Internet Explorer 5.5 dirilis dengan dukungan CSS1 hampir penuh pada tahun 2000. Tentu saja, seperti yang kita ketahui sekarang, implementasi browser dari CSS telah sangat bermasalah dan sulit untuk dikerjakan setidaknya selama satu dekade lagi. Untungnya, hari ini situasinya telah membaik secara signifikan, yang akhirnya memungkinkan untuk mewujudkan impian para pengembang bahwa Anda dapat menulis kode sekali dan itu akan berfungsi (hampir) sama di browser yang berbeda.



Secara pribadi, saya menarik dari semua ini betapa sewenang-wenang dan kontekstual keputusan yang mengatur alat modern kita. Jika CSS dirancang agar kompatibel dengan batasan tahun 1996, maka mungkin dua puluh tahun kemudian yang memberi kami izin untuk melakukan sesuatu yang sedikit berbeda.