Pada masa itu saya cuba melayari web tanpa CSS

CSS adalah apa yang memberi setiap laman web reka bentuknya. Laman web pasti tidak begitu menyeronokkan dan mesra tanpanya! Saya telah membaca tentang seseorang yang pergi seminggu tanpa JavaScript dan bagaimana pengalaman menghasilkan laman web yang lebih cepat, walaupun aspek tertentu tidak akan berfungsi seperti yang diharapkan.

Tetapi CSS. Mematikan CSS Semasa melayari web tidak akan membuat web jauh lebih rendah ... betul? Atau, seperti JavaScript, adakah beberapa ciri tidak berfungsi seperti yang diharapkan? Oleh kerana rasa ingin tahu, saya memutuskan untuk memberikannya pusaran dan merobek daging CSS dari kerangka HTML sambil melayari beberapa laman web.

Mengapa, anda mungkin bertanya? Adakah terdapat sebab-sebab bukan masokistik untuk mematikan CSS? Heydon Pickering pernah tweet bahawa melumpuhkan CSS adalah cara yang baik untuk memeriksa beberapa piawaian kebolehaksesan:

1. Unsur -unsur biasa seperti tajuk, senarai, dan kawalan bentuk adalah semantik dan masih kelihatan baik.
2. Hierarki visual masih ditubuhkan dengan gaya lalai.
3. Kandungan masih boleh dibaca dalam susunan logik.
4. Imej masih wujud sebagai tag dan bukannya hilang sebagai latar belakang CSS.

Tinjauan Webaim dari 2018 melaporkan bahawa 12.5% ​​pengguna yang bergantung pada apa -apa jenis teknologi dibantu melayari Web dengan gaya tersuai, yang boleh termasuk menghapuskan setiap perisytiharan CSS di seluruh laman web. Dan, jika kita bercakap tentang sambungan internet yang perlahan, menumbuk CSS boleh menjadi satu cara untuk mengambil kandungan lebih cepat. Terdapat juga kemungkinan bahawa CSS dilumpuhkan untuk alasan di luar kawalan segera kami, seperti ketika pelayan mempunyai cegukan gagal memuatkan aset.

Sebagai percubaan, saya menggunakan lima laman web dan aplikasi web tanpa CSS, dan siaran ini akan merangkumi pengalaman saya. Ia akhirnya menjadi pengembaraan pembukaan mata untuk saya secara peribadi, tetapi juga telah memaklumkan saya secara profesional sebagai pemaju dengan cara yang saya harap anda akan melihat juga.

Tetapi pertama, inilah cara melumpuhkan CSS

Anda benar -benar dialu -alukan untuk hidup secara langsung melalui saya dalam bentuk jawatan ini. Tetapi bagi anda yang merasakan tugas dan ingin mengalami web yang kurang gaya, inilah cara melumpuhkan CSS dalam pelbagai pelayar:

• Chrome: Sebenarnya tiada tetapan dalam Chrome untuk melumpuhkan CSS, jadi kita perlu menggunakan lanjutan, seperti Disable-HTML.
• Firefox: Lihat > Gaya Halaman > Tiada Gaya
• Safari: Safari > Keutamaan ... > Tunjukkan Menu Membangunkan dalam menu bar . Kemudian pergi ke dropdown yang dibangunkan dan pilih pilihan "Lumpuhkan Gaya".
• Opera: Seperti Chrome, kami memerlukan lanjutan, dan pemaju web sesuai dengan rang undang -undang.
• Internet Explorer 11: Lihat > Gaya > Tiada Gaya

Saya tidak dapat mencari cara yang didokumenkan untuk melumpuhkan CSS di tepi, tetapi kita boleh mengeluarkan CSS daripadanya dan mana -mana pelayar lain secara pemrograman melalui API Model Objek CSS dalam Konsol Devtools:

 var d = dokumen;

untuk (var s dalam s = d.stylesheets)
    S [S] .disabled = true;

untuk (var i dalam i = d.QuerySelectorAll ("[gaya]"))
    I [i] .style = "";

Gelung pertama melumpuhkan semua gaya luaran dan dalaman (dalam dan ), dan yang kedua menghapuskan sebarang gaya inline. Walau bagaimanapun, kaveat di sini adalah bahawa unsur -unsur masih boleh diberikan gaya inline baru secara dinamik. Untuk segera memadamkan mereka, penyelesaian yang terbaik adalah menambah pemasa. Sesuatu seperti ini:

 (f = fungsi () {
    // Keluarkan CSS
    …

    setTimeout (f, 20);
}) ();

Sebagai alternatif, terdapat pelayar teks sahaja-seperti Lynx kuno-tetapi mengharapkan untuk hidup tanpa video, imej (termasuk SVGs), dan JavaScript.

Melalui kaca yang kelihatan kurang gaya ...

Untuk setiap laman web saya melayari tanpa CSS - Amazon, Duckduckgo, GitHub, Stack Overflow, Wikipedia dan Checker Contress yang dipanggil Hex NAW - Saya akan berkongsi kesan pertama saya dan meletakkan beberapa cadangan di luar sana yang mungkin membantu pengalaman itu.

Bersedia, kerana perkara -perkara mungkin mendapat sedikit ... mengerikan. ?

Laman web 1: Amazon.com

Tidak ada keperluan sebenar untuk pengenalan di sini. Bukan sahaja Amazon adalah ruji isi rumah untuk banyak daripada kita, ia juga menguasai sebahagian besar web, terima kasih kepada platform perkhidmatan Web Amazon mereka di mana -mana.

Terdapat banyak perkara yang berlaku di sini, jadi saya akan meneroka barangan yang kurang gaya yang masuk ke jalan saya semasa mencari produk dan berpura-pura membelinya.

Di laman web, saya segera melihat lembaran sprite yang digunakan oleh laman web ini. Ia benar -benar sebagai tempat di mana logo itu boleh, sehingga menjadikannya sukar untuk mengetahui sama ada imej -imej tersebut dimaksudkan untuk berada di sana. Setiap sprite mengandungi pelbagai versi logo, dan walaupun saya dapat melihat tanda perkataan "Amazon" di dalamnya, itu menghairankan bahawa ia bukan pautan rumah global. Sekiranya anda ingin tahu di mana pautan rumah benar -benar, ia adalah struktur rentang di mana logo itu disajikan sebagai imej latar belakang ... dalam CSS:

 <a href="/ref%20=%20nav_logo" aria-label="Amazon" tabindex="6">
   
   
   
</a>

Masalah seterusnya yang timbul ialah pautan "Langkau ke Kandungan Utama" tidak kelihatan seperti pautan skip biasa, namun ia berfungsi seperti satu. Ternyata menjadi elemen tanpa href, dan JavaScript (ya, saya meninggalkan yang didayakan) digunakan untuk meniru fungsi utama.

Apabila saya memulakan carian, saya perlu melihat lebih jauh di bawah pautan "Bermula" untuk melihat cadangan. Di bawah item "senarai anda" dan "akaun anda", ia menjadi sukar untuk memberitahu pautan. Mereka muncul semua bersama -sama seolah -olah mereka adalah satu pautan mega super panjang. Saya percaya ia lebih berkesan untuk menggunakan senarai semantik yang tidak teratur dalam senario ini untuk mengekalkan rasa hierarki.

Di bawah semua cadangan carian, bagaimanapun, pautan akaun dan navigasi lebih mudah dibaca kerana mereka dipisahkan oleh beberapa ruang.

Menariknya, karusel menurunkan halaman masih agak berfungsi. Jika saya mengklik pilihan "Halaman Sebelumnya" atau "Halaman Seterusnya", urutan imej diubah. Walau bagaimanapun, melompat di antara pilihan tersebut memerlukan saya menatal.

Melangkah sedikit lagi, terdapat elemen iklan. Ia mengandungi rentetan "maklum balas iklan" yang kelihatan statik seperti apa yang kita lihat dengan pautan "langkau ke kandungan utama" sebelum ini. Nah, saya juga mengkliknya dan ia mendedahkan satu borang untuk berkongsi maklum balas mengenai kaitan iklan.

Anda mungkin terlepasnya, tetapi ada butang kosong di atas dua kumpulan label bentuk dan butang radio tidak dapat dielakkan. Strukturnya mengelirukan kerana saya tidak tahu label mana yang dimiliki oleh butang radio. Maksud saya, saya rasa saya boleh mengandaikan bahawa label pertama pergi dengan input radio pertama, tetapi itulah yang sebenarnya: tekaan.

Apa yang membingungkan ialah terdapat butang hantar antara "tetingkap tutup," "membatalkan," dan "menghantar maklum balas" pilihan di bahagian bawah borang. Jika saya menekan mana -mana ini, saya dibawa balik ke iklan. Sekarang, katakan saya buta dan menggunakan pembaca skrin untuk menavigasi bahagian yang sama ini, walaupun dengan kehadiran CSS. Saya akan diberitahu "Hantar, butang" untuk dua butang dan oleh itu akan mempunyai petunjuk sifar apa yang perlu dilakukan tanpa meneka. Ini satu lagi peringatan yang baik mengenai kepentingan semantik ketika mengendalikan markup (label butang dalam kes ini) dan menyedari betapa banyak pergantungan diletakkan di JavaScript untuk mengatasi mungkir web.

Melakukan carian - katakan untuk "Mac Minis" - Saya masih boleh mengakses dan memahami penilaian produk kerana ia dipaparkan sebagai teks (bukannya tooltips yang mereka sebaliknya) sebagai ganti bintang. Ini adalah contoh yang baik untuk menggunakan sandaran teks yang kukuh apabila imej digunakan sebagai kandungan visual, tetapi disajikan sebagai imej latar belakang dalam CSS.

Setelah memilih Mac Mini dengan Intel Core i3, saya disambut oleh produk Mac lain di atas produk yang saya pilih dan perlu menavigasi di luar mereka untuk memilih kuantiti yang saya ingin beli.

Tatal ke bawah, dan butang "Tambah ke Cart" dipaparkan di sebelah label yang mengandungi kandungan yang sama. Itu berlebihan dan mungkin tidak perlu kerana elemen mampu memegang labelnya sendiri:

 <utton> tambah ke kereta </utton>

Seterusnya, kami mempunyai tawaran untuk keahlian Amazon Prime. Itu semua baik dan cantik, tetapi perhatikan bahawa ia dimasukkan antara produk yang saya beli dan butang "Beli Sekarang". Saya mempunyai masa yang sangat sukar untuk mengetahui sama ada mengklik "Beli Sekarang" akan menambah mini Mac ke checkout, atau sama ada saya membeli Amazon Prime sebaliknya.

Saya juga mahu bermain sedikit, jadi saya cuba mengeluarkan mini Mac dari kereta saya sebaik sahaja saya tahu bagaimana untuk menambahnya. Ia mengambil masa seperti sepuluh saat untuk mencari kereta supaya saya dapat mengeditnya. Ternyata ia terus bersebelahan dengan pautan "Teruskan ke checkout (1 item)" tetapi Rams terus bersebelahan sehingga semuanya kelihatan seperti satu pautan.

Secara keseluruhannya, tidak sukar untuk mencari produk. Sebaliknya, jalan ke checkout menjadi lebih sakit kepala ketika saya meneruskan. Terdapat beberapa amalan yang berkaitan dengan semantik dan aksesibiliti yang menyebabkan kekeliruan, dan butang dan pautan penting menjadi lebih sukar dicari.

? Apa laman web ini berfungsi dengan baik	? Apa yang dapat diperbaiki oleh laman web ini
Carousel berfungsi walaupun tanpa gaya.	Logo bergantung pada imej latar belakang, mengaburkan jalan pulang ke rumah.
Hierarki kandungan masih umumnya berguna untuk mengetahui di mana kita berada di halaman.	Banyak pautan dan sauh bergantung kepada JavaScript dan tidak kelihatan interaktif.
Perintah elemen tetap kasar.	Pautan sering bertemu antara satu sama lain atau diletakkan di luar di mana mereka akan relevan.
Penggunaan hebat untuk penarafan produk yang bergantung pada imej latar belakang.	Label butang sama ada mengelirukan atau berulang -ulang.
	Unsur -unsur bentuk gagal menyelaraskan diri dengan betul.
	Terdapat perjalanan kasar untuk diperiksa.

Laman web 2: Duckduckgo

Adakah anda pernah menggunakan DuckDuckgo sebelum ini? Saya menganggap ramai orang membaca trik CSS, tetapi bagi mereka yang mungkin mendengarnya buat kali pertama, ia adalah alternatif kepada carian Google dengan penekanan pada privasi pengguna.

Oleh itu, bermula dengan ini adalah sedikit mengelirukan kerana laman utama DuckDuckGo sangat mudah. Tidak banyak yang boleh salah di sana, bukan? Nah, ia sedikit lebih terlibat daripada itu kerana kita berurusan dengan hasil carian, hierarki kandungan dan kaitan apabila kita dapat membuat pertanyaan carian.

Dari kelawar, apa yang saya disambut adalah lebih banyak kandungan daripada yang saya harapkan untuk pendarat yang mudah. Pada masa itu tidak jelas apa laman web ini dengan mengimbas laman web. Sebutan pertama nama produk adalah item keempat dalam senarai yang tidak teratur pertama dan ia adalah panggilan untuk bertindak untuk "menyebarkan duckduckgo." Logo itu benar -benar hilang, yang jelas bermakna ia digunakan sebagai latar belakang ... dalam CSS.

Bercakap tentang senarai yang tidak teratur itu, saya menganggap apa yang saya lihat berada di tajuk, dan tidak ada navigasi langkau. Kami mempunyai ikon Arrow Triple (adalah menu mudah alih atau menu untuk menyembunyikan item yang paling tidak penting, atau sesuatu yang lain?), Diikuti dengan kandungan yang berkaitan dengan privasi, pautan media sosial, sesuatu yang kelihatan seperti satu pautan tetapi sebenarnya dua pautan untuk "tentang Duckduckgo" dan "belajar lebih banyak."

Akhirnya, ke arah bahagian paling bawah adalah di mana kes penggunaan utama untuk tapak sebenarnya muncul: bar carian. Saya menganggap label "s" bermaksud "carian" dan label "x" adalah singkat untuk membersihkan medan carian.

Baiklah, untuk melakukan carian. Ia sangat sejuk bahawa saya masih dapat melihat penggabungan auto dan menggunakan kekunci anak panah atas dan ke bawah untuk menyerlahkan setiap satu. Membersihkan medan walaupun, cadangan tidak hilang sehingga selepas saya menyegarkan halaman.

Segala -galanya dalam menu Tetapan adalah item dalam senarai termasuk apa yang harus menjadi tajuk - "Tetapan," "Essentials Privasi," "Mengapa Privasi," "Siapa Kami," dan "Terus Sentuh." Ini adalah sebahagian besar daripada lelaki mudah alih jika CSS didayakan, mungkin dicetuskan oleh perkara pautan anak panah tiga di bahagian atas. Dalam menu itu, saya melihat empat titik peluru kosong antara "Tetapan" dan "Lebih Tema."

Datang ke sini sebagai pengguna baru, saya tidak tahu apa item senarai kosong itu, tetapi peluru yang saya sorot dalam tangkapan skrin di atas sebenarnya adalah butang tema. Untuk menjelaskan niat, beberapa teks sandaran akan membantu, dan ini harus menjadi radio atau butang biasa dan bukannya senarai item (memandangkan fungsi mereka).

Setiap blok kandungan dengan "x" - termasuk "tetapan" - tidak boleh ditolak; Walau bagaimanapun, mengklik "x" di atas imej imej pejalan kaki yang menyebabkan sebahagian kandungan untuk membersihkan skrin - terima kasih kepada JavaScript masih diaktifkan. Apa yang saya benar -benar janggal adalah numerasi yang berlebihan dalam senarai yang diperintahkan di bawah "Beralih ke DuckDuckGo ..." Kami melihat ini:

 1.Kami tidak menyimpan maklumat peribadi anda
2. Kami tidak mengikuti anda dengan iklan
3. 3Kami tidak menjejaki anda. Pernah.

Nampaknya beberapa kes penggunaan campuran semantik dengan cara lain untuk memaparkan nombor item senarai.

Terdapat jumlah ruang putih yang besar di bawah imej pejalan kaki sehingga elemen

pertama. Dengan mengandaikan mereka sama ada pautan atau butang, mengklik setiap contoh "Tambah DuckDuckGo ke [Pelayar]" tidak melakukan apa -apa. Ilustrasi setiap bahagian menyebabkan beberapa menatal mendatar yang tidak perlu, yang merupakan isu biasa yang akan kita lihat di laman web lain yang kita lihat.

Selepas bahagian itu, ada kotak kosong dan saya tidak tahu apa itu.

Saya memecahkan devtools terbuka dan ternyata menjadi elemen

dalam

Laman web 3: GitHub

Hei, inilah laman web yang banyak di antara kita yang biasa! Nah, ramai di antara kita yang digunakan untuk log masuk ke dalamnya sepanjang masa, tetapi saya akan melayari ketika keluar.

Sudah, ada pautan skip (yay). Terdapat juga ikon navigasi mudah alih yang saya harapkan tidak akan melakukan apa -apa, dan saya terbukti betul apabila saya cuba.

Di antara beberapa item navigasi, terdapat jurang yang tidak perlu. Jika anda mengklik ini, mereka masih berfungsi sebagai menu dropdown. Mereka adalah dan

elemen ... tetapi ada yang terasa secara semantik salah. Adalah baik bahawa item menu sebenarnya tidak teratur item dan fungsi penyemak imbas asli masih boleh dilakukan dengan menggunakan cara semantik untuk mengembangkan kandungan. Tetapi ikon SVG itu merosakkan saya.

Sebelum menaip apa -apa ke dalam bidang, saya melihat tiga contoh pautan "Cari semua GitHub" dan "melompat ke". Saya tidak tahu apa yang hendak diklik, tetapi jika saya melakukan carian, kata kunci muncul dalam kumpulan ketiga.

Segala -galanya di laman utama nampaknya baik kecuali beberapa imej yang terlalu besar melimpah melimpah tingkap.

Mari kita kembali ke bar carian dan menavigasi ke mana -mana repo yang kita dapati. Betul di bawah butang carian, kami mempunyai dua bar navigasi sekunder yang hampir sama yang mengembalikan kiraan repositori, kod, komitmen, dan meta lain. Tanpa melihat sumber itu, saya tidak tahu apa tujuannya untuk mempunyai dua daripada ini.

Halaman repositori masih mempunyai struktur yang mudah diikuti dan hierarki logik untuk sebahagian besar. Semasa log keluar dan cache saya dibersihkan sebelum datang, butang "menolak" untuk blok "Sertai Github Today" masih dilakukan seperti yang saya harapkan. Seperti yang kita lihat sebelum ini di Amazon, pautan tag sukar untuk dimaklumkan kerana mereka berlari bersama sebagai satu baris.

Dua butang seterusnya - "JavaScript" dan "Permintaan Pull Baru" - nampaknya tidak melakukan apa -apa apabila saya mengkliknya. Saya bayangkan butang permintaan tarik harus dilumpuhkan semasa melihat sebagai tetamu sejak, melainkan jika ia bertujuan untuk mengambil pengguna ke skrin log masuk terlebih dahulu ... tetapi walaupun itu tidak betul. Ternyata butang itu memang dilumpuhkan apabila CSS aktif, walaupun. Kemudian seluruh halaman cukup mudah difahami.

Jika anda berada di sini terutamanya untuk menguruskan, menyumbang kepada, atau memeriksa repositori, anda tidak akan menghadapi banyak geseran sejak hierarki bermain dengan baik. Anda akan mengalami hampir sama di tempat lain, sama ada anda melihat permintaan tarik, isu, atau fail individu. Kebanyakan halangan hidup di halaman yang kurang menonjol di laman web ini.

? Apa laman web ini berfungsi dengan baik	? Apa yang dapat diperbaiki oleh laman web ini
Hierarki dan struktur banyak halaman sangat mudah diikuti dan membuat akal logik.	Gunakan atribut ketinggian dan lebar pada unsur -unsur dan SVG untuk menghalang mereka daripada meniup.
Kebanyakan ikon SVG yang tertanam di halaman adalah bersaiz sewajarnya.	Tonton item senarai kosong.
Penggunaan pautan skip yang bagus di tajuk.	Pastikan label butang menggunakan perkataan penuh.
	Pastikan pautan mempunyai ruang kosong atau garis pecah di antara mereka untuk mengelakkan run-on.

Laman Web 4: Hex Naw

Laman seterusnya ini adalah alat dalam talian yang sering saya gunakan untuk memeriksa perbezaan warna untuk kebolehaksesan. Dan untuk laman web yang begitu besar pada warna , mungkin banyak yang berlaku di sini dengan CSS, jadi ia harus menarik.

Terdapat sebilangan besar ruang di atas navigasi dan tiada pautan melangkau. Butang hamburger dan rapat untuk susun atur mudah alih dan butang "X" di sebelah setiap warna untuk diuji adalah besar.

Oh, dan lihat jurang gergasi ini antara butang "Warna Ujian" dan bahagian kandungan seterusnya.

Salah satu ciri yang bagus di laman web ini adalah kotak semak yang membolehkan anda melihat hanya warna yang lulus ujian, dan bukannya melihat semua warna yang diuji. Malangnya, butang itu tidak melakukan apa -apa dengan CSS dilumpuhkan. Walau bagaimanapun, saya masih dapat melihat warna mana yang berfungsi dan mendapatkan definisi untuk nisbah kontras, teks besar, dan teks kecil secara langsung dalam jadual hasil.

Menyembunyikan dan menunjukkan syarat -syarat yang mungkin adalah apa yang butang dilakukan dengan CSS. Bummer adalah bahawa saya tidak akan tahu tujuan huruf tunggal (contohnya S dan R) selepas tajuk meja. Ia juga ironis dan mengelirukan untuk melihat mesej itu untuk semua warna yang gagal selepas meja kerana, dengan baik, terdapat warna lulus dalam senarai ini. Apa yang boleh dilakukan adalah menyembunyikannya secara lalai tetapi menyuntiknya kemudian jika semua warna dalam satu ujian gagal.

Menarik keluar Devtools, ternyata beberapa ruang putih di bahagian atas adalah logo Hex NAW sebagai fail SVG. Ruang di atas yang dikaitkan dengan simbol SVG lain yang digunakan untuk halaman. Dengan menggunakan warna lalai hitam untuk logo, ini akan membantu mengurangkan beberapa ruang. Saya membuat perubahan cepat di DevTools dan ia membuat perbezaan yang ketara.

Jurang kedua ruang disebabkan oleh loader SVG yang muncul semasa mengira kontras warna. Ini boleh dibantu dengan menentukan yang lebih kecil, namun berkadar, lebar dan ketinggian sama seperti menu mudah alih dan ikon "X".

Menambah lebar dan ketinggian awal kepada setiap SVG pasti akan mengurangkan keperluan untuk menatal. Ini juga apa yang boleh kita lakukan untuk memperbaiki jurang yang kita lihat dalam navigasi Github juga.

Pada akhirnya, Hex Naw tetap berguna tanpa CSS. Saya masih boleh menguji warna, mendapatkan hasil warna lulus dan gagal, dan menavigasi di sekitar halaman. Ia terlalu buruk saya tidak dapat bekerja dengan warna sebenar dan terpaksa bekerja di sekitar ikon SVG yang lebih besar.

? Apa laman web ini berfungsi dengan baik	? Apa yang dapat diperbaiki oleh laman web ini
Laman ini mengekalkan hierarki kandungan yang baik di seluruh laman web.	SVG harus menggunakan warna mengisi balik dan menggunakan atribut ketinggian dan lebar.
Semua elemen ditulis secara semantik.	Maklum balas untuk semua warna yang gagal boleh ditambah secara dinamik dan dikeluarkan untuk mengelakkan pemesejan yang janggal.
Ujian itu sendiri berfungsi dengan baik dengan pengecualian dapat menunjukkan atau menyembunyikan maklumat.	Pertimbangkan cara alternatif untuk memaparkan warna untuk nilai -nilai yang diuji, seperti sel meja dengan atribut warna latar belakang.

Laman Web 5: Stack Overflow

Seperti GitHub, Stack Overflow adalah salah satu sumber yang banyak (jika tidak banyak) dari kita menyimpan poket belakang kita kerana ia membantu mencari sama ada seseorang telah bertanya soalan pembangunan dan jawapannya.

Pada halaman untuk mengemukakan soalan, saya melihat sekumpulan mata peluru kosong di atas elemen utama . Saya tidak tahu mengapa item senarai kosong ada di sana. Saya tidak melihat mana -mana butang pemformatan sama ada, tetapi selepas mengacaukan sedikit, saya mendapati bahawa mereka tidak lebih daripada item senarai kosong. Mungkin teks balik atau ikon SVG untuk setiap item akan membantu mengenal pasti apa yang dilakukan dan dilakukannya. Mereka harus diubah menjadi butang sebenar juga.

Ia juga masih boleh mendapatkan senarai soalan yang sama semasa memasukkan teks ke dalam medan tajuk. Setiap kerja di sini seperti yang diharapkan, yang bagus. Walaupun, adalah pelik bahawa undi undi untuk setiap soalan yang dicadangkan muncul dua kali, sekali di atas gelaran sebagai pautan dan sekali lagi di sebelah tajuk tanpa dihubungkan.

Salah satu elemen utama yang kita semua cari ketika mendarat di halaman soalan limpahan Stack adalah tanda semak Big Green yang menunjukkan jawapan yang betul dari semua jawapan yang dikemukakan. Tetapi dengan CSS dimatikan, sukar untuk memberitahu jawapan yang diterima kerana setiap jawapan dalam senarai mempunyai tanda semak hitam. Walaupun jawapan yang diterima selalu di bahagian atas, masih tiada petunjuk alternatif atau sandaran tanpa perlu berinteraksi dengan halaman. Di samping itu, tidak ada petunjuk jika anda telah mengundi atau turun mengundi soalan atau mana -mana jawapannya.

Untuk meringkaskan pengalaman saya di Stack Overflow, saya dapat mencapai apa yang biasanya saya datang ke laman web ini untuk: mencari jawapan kepada masalah pengaturcaraan. Yang mengatakan, terdapat beberapa peluang untuk penambahbaikan dan laman web ini adalah contoh utama bagaimana reka bentuk sering bergantung pada warna untuk menunjukkan hierarki atau nilai pada halaman, yang sangat hilang dari halaman soalan dalam eksperimen ini.

? Apa laman web ini berfungsi dengan baik	? Apa yang dapat diperbaiki oleh laman web ini
Hampir setiap elemen ditulis secara semantik.	Gunakan kawalan yang jelas untuk mengenal pasti alat pengeditan semasa bertanya atau menjawab soalan.
Ikon SVG menggunakan atribut lebar dan ketinggian.	Pertimbangkan ikon visual untuk membezakan jawapan yang diterima dari sebarang jawapan lain kepada soalan.
Senarai jawapan adalah jelas dan mudah diimbas.	Pertimbangkan kaedah yang berbeza untuk menunjukkan undi UP atau undi bawah selain warna sahaja.

Laman web 6: Wikipedia

Wikipedia, titik rujukan utama web! Ia adalah ruji dalam talian dan salah satu kualiti yang menarik adalah semacam kekurangan reka bentuk. Ini harus membuat ujian yang menarik.

Beberapa pautan ke bawah, kami mempunyai pilihan navigasi skip untuk navigasi dan carian sebenar. Tajuk laman utama yang mengandungi imej Globe mengekalkan susun atur dua lajurnya, dan anda mungkin menebak mengapa: ini adalah susun atur meja. Walaupun ia mungkin tidak menjadi isu kebolehgunaan, kita tahu ia bukan semantik untuk bergantung kepada jadual untuk membuat susun atur. Itulah peninggalan yang lalu ketika kami tidak mempunyai terapung, flexbox, grid atau cara lain untuk mengendalikan penempatan kandungan. Yang mengatakan, tidak ada masalah kebolehgunaan yang ketara atau elemen yang mengelirukan pada halaman.

Mari kita beralih kepada apa yang kita banyak menghabiskan masa di Wikipedia: entri artikel. Ini sering menjadi titik masuk ke Wikipedia, terutamanya bagi kita yang bermula dengan menaip sesuatu ke dalam enjin carian, kemudian klik pada hasil carian Wikipedia.

Intinya adalah bahawa halaman ini masih sangat boleh digunakan dan hierarki dengan CSS dilumpuhkan. Susun atur itu turun ke satu lajur, tetapi kandungannya masih mengalir dalam urutan logik dan juga mengekalkan bit gaya, terima kasih sekali lagi kepada pergantungan pada jadual dan sifat jadual inline.

Satu isu yang saya hadapi adalah navigasi. Terdapat pautan "melompat ke navigasi" di tajuk yang memang menjatuhkan saya ke navigasi apabila saya mengkliknya. Sekiranya anda tertanya -tanya, navigasi terkandung dalam footer, yang merupakan sebab untuk perlu melompat ke sana.

Terdapat kotak semak yang seolah -olah rawak di atas beberapa tajuk navigasi (khususnya untuk "varian" dan "lebih") dan mereka kelihatan tidak berfungsi, walaupun kotak semak di atas "lebih" menjadi paparan pada lebar viewport tertentu apabila CSS diaktifkan.

Sebenarnya ada satu perkara yang ganjil dalam navigasi, dan ia adalah butang yang kurang label antara tajuk "dalam projek lain" dan "bahasa".

Mengklik butang itu, saya masih dapat mengakses tetapan bahasa, dan kebanyakannya berfungsi seperti yang diharapkan. Sebagai contoh, susun atur mengekalkan susun atur tab yang berfungsi super.

Walau bagaimanapun, dalam tab paparan, butang "bahasa" dan "fon" tidak melakukan apa -apa. Mereka mungkin juga tab, tetapi sekurang -kurangnya saya dapat melihat apa yang mereka tawarkan. Di samping butang tersebut terdapat dua menu pilihan kosong yang sama sekali tidak ada (yang pertama menjadi penduduk dengan pilihan fon comicneue, opendyslexic, dan sistem apabila anda menyemak kotak semak). Melihat tab "Input", butang bahasa penulisan masih berfungsi sebagai tab. Saya masih dapat memilih pilihan selain bahasa Inggeris, Sepanyol, dan Cina.

Artikel -artikel itu tidak sukar dibaca sama sekali tanpa CSS dan itu kerana hampir setiap elemen betul betul dan mengikuti hierarki dokumen yang konsisten. Satu perkara yang saya tertanya -tanya adalah di mana butang "Tunjukkan/Sembunyikan" yang biasanya dalam jadual kandungan pergi. Ia ternyata menjadi kotak semak tunggal, dan labelnya palsu-ia menggunakan harta kandungan pada elemen pseudo di CSS untuk memaparkan label.

Isu lain dalam artikel ialah anda perlu menghabiskan masa memburu imej semasa pratontonnya. Biasanya, mengklik imej dalam bar sisi artikel akan mencetuskan modal skrin penuh yang mengandungi karusel imej. Tanpa CSS, karusel itu hilang dan, di tempatnya, adalah imej dengan barisan butang yang tidak berlabel di atasnya. Itulah masalah, tetapi akan menjadi baik jika karusel tidak semua di bawah halaman, bertentangan dengan di mana imej yang diklik berada di bahagian atas halaman tanpa keupayaan untuk melompat ke sana.

Saya akan cuai jika saya tidak menyebut bahawa logo Wikipedia tidak dapat ditemui di artikel! Ia bukan SVG putih pada putih. Pautan tidak mengandungi apa -apa:

 <a href="/wiki/main_page" title="Lawati halaman utama"> </a>

Syukurlah, pautan "halaman utama" di bawah "navigasi" adalah cara lain pulang ke rumah tanpa menekan butang belakang penyemak imbas. Tetapi, masih terasa ganjil untuk tidak mempunyai penjenamaan pada halaman apabila ia melakukan pekerjaan yang hebat di laman utama.

Isu -isu HTML Wikipedia wujud kebanyakannya dalam ciri -ciri yang saya harapkan kurang sering digunakan dan bukannya artikel. Mereka tidak pernah menghalang pengalaman membaca saya dalam jangka masa panjang.

? Apa laman web ini berfungsi dengan baik	? Apa yang dapat diperbaiki oleh laman web ini
Laman ini mengekalkan struktur dan hierarki yang bersih.	Penempatan logo boleh dipindahkan (atau ditambah, dalam beberapa kes) ke bahagian atas halaman tanpa imej latar belakang CSS.
Langkau pautan digunakan dengan berkesan untuk carian dan navigasi.	Butang harus termasuk label.
Kandungan artikel adalah semantik dan mudah dibaca.	Carousel imej pada halaman boleh memuatkan di mana pencetus berlaku dan menggunakan label butang yang betul untuk kawalan.

Cara untuk menjadikan CSS kurang pengalaman yang lebih baik

CSS adalah komponen utama kepada web moden. Seperti yang telah kita lihat hingga ke tahap ini, terdapat beberapa laman web yang menjadi tidak dapat dipulihkan tanpa itu-dan kami menghitung beberapa laman web yang paling dikenali dan digunakan dalam campuran itu. Apa yang kita lihat ialah, paling baik, tujuan utama untuk tapak masih boleh dicapai, tetapi ada halangan di sepanjang jalan. Perkara seperti:

• pautan langkau yang hilang atau tidak betul secara semantik
• Pautan yang berjalan bersama
• imej besar yang memerlukan menatal tambahan
• Unsur kosong, seperti item senarai dan label butang

Mari kita lihat sama ada kita dapat menyusunnya ke dalam senarai amalan terbaik untuk dipertimbangkan untuk situasi di mana CSS mungkin dilumpuhkan atau tidak tersedia.

Sertakan pautan navigasi skip di bahagian atas dokumen

Having a hidden link to skip the navigation is a must. Notice how most of the sites we looked at contained navigation links directly in the header. With CSS turned off, those navigations became long lists of links that would be so hard to tab or scroll through for any user. Having a link to skip that would make that experience much better.

The most basic HTML example I've seen is an anchor link that targets an ID where the main content begins.

 <a href="#main">Skip to main content</a>
<!-- etc. -->
<main></main>

And, of course, we can throw a class name on that link to hide it visually so it is not displayed in the UI but still available for both keyboard users and when CSS happens to be off.

 .skip-navigation {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  Limpahan: Tersembunyi;
  padding: 0;
  position: absolute;
  height: 1px;
  width: 1px;
}

/* Bonus points for adding :focus styles */

Leave whitespaces where they make sense

Another pain point we saw in a few cases were text links running together. Whether it was in the navigation, tags, or other linked up meta, we often saw links that were “glued together” in such a way that several individual links appeared to be one giant link. That's either the result of hand-coding the links like that or an automated build task that compresses HTML and removes whitespaces in the process. Either way, the HTML winds up like this:

 <a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Python</a><a href="#">Swift</a>

We can keep the freedom to use spaces or line breaks though, even with CSS disabled. One idea is to lean on flexbox for positioning list elements when CSS is enabled. When CSS is disabled, the list items should stack vertically and display as list items by default.

If the items are tags and should still be separated, then traditional spacing methods like margins and padding are still great and we can rely on natural line breaks in the HTML to help with the style-less formatting. For example, here are line breaks in the HTML used to separate items, flexbox to remove spaces, then styled up in CSS to re-separated the items:

Use width and height attributes liberally

The biggest nuisance in this experiment may have been images exploding on the screen to the point that they dominate the content, take up an inordinate amount of space, and result in a hefty amount of scrolling for all users.

The fix here is rather straightforward because we have HTML attributes waiting for us to define them. Both images and SVG have methods for explicitly defining their width and height.

 <img  src="/static/imghwm/default1.png" data-src="/path/to-image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Pada masa itu saya cuba melayari web tanpa CSS" >

<svg width="40px" height="40px" viewbox="0 0 200 200">
  <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
</svg>

Prepare SVGs for a white background

Many of the large gaps on the sites we looked at looked like empty space, but they were really white SVGs that blew up to full size and blended into the white background.

So, yes, using the proper width and height attributes is a good idea to prevent monstrous icons, but we can also do something about that white-on-white situation. Using properties like fill and fill-rule as attributes will work here.

 <!-- Icon will be red by default -->
<svg viewbox="-241 243 16 16" width="100px" fill="#ff0000">
  <path d="M-229.2,244c-1.7,0-3.1,1.4-3.8,2.8c-0.7-1.4-2.1-2.8-3.8-2.8c-2.3,0-4.2,1.9-4.2,4.2c0,4.7,4.8,6,8,10.6 c3.1-4.6,8-6.1,8-10.6C-225,245.9-226.9,244-229.2,244L-229.2,244z"></path>
</svg>

 /* ...and it's still red when CSS is enabled */
svg {
  fill: #ff0000;
} 

Label those buttons!

Lastly, if buttons are initially empty, they need to have visible fallback content. If they use a background image and a title for what the do, use a span containing the title text then add aria-hidden="true" so it doesn't sound like the screen reader is reading the button label twice (eg VoiceOver says, “Add button Add” instead).

 <button title="Add">
  <span aria-hidden="true">Add</span>
</button>

Then the CSS can be something like this:

 .btn-icon {
  background: url(path/to/icon.svg) 0 0 / 100% 100%;
  height: 40px;
  width: 40px;
}

.btn-label {
  paparan: blok;
  Limpahan: Tersembunyi;
  height: 0;
}

If there are

elements acting as buttons, they can remain, but they should be static, and the contents should be placed in a button.

Now, if the icon is an SVG, we can ensure the title tooltip can still be seen by using aria-labelledby and assigning the id to the title.

 <button>
  <svg width="40px" height="40px" viewbox="0 0 200 200" aria-labelledby="btn-title">
    <title>Add</title>
    <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
  </svg>
</button>

Kesimpulan

It can be easy to either forget or be afraid to check how a site appears when CSS isn't available to make the UI look as good as intended. After a brief tour of the Non-CSS Web™, we saw just how important CSS is to the overall design and experience of sites, both small and large.

And, like any tool we have in our set, leaning too heavily on CSS to handle the functionality and behavior of elements can lead to poor experiences when it's not around to do its magic. We've seen the same be true of sites that lean too heavily on JavaScript. This isn't to say that we should not use them and rely on them, but to remember that they are not bulletproof on their own and need proper fallbacks to ensure an optimal experience is still available with or without our tooling.

Seen in that light, CSS is really a layer of progressive enhancement. The hierarchy, form controls, and other elements should also remain intact under their user agent styles. The look and feel, while important, is second when it comes to making sure elements are functional at their core.

Atas ialah kandungan terperinci Pada masa itu saya cuba melayari web tanpa CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!