2016-12-29

Kami menghidupkan tombol dan memeriksa situs untuk validitas kode HTML dan CSS

Halo pengunjung yang terhormat!

Hari ini, dengan menggunakan contoh halaman web yang dibuat, kita akan melihat bagaimana Anda dapat memeriksa validitas situs, yaitu kepatuhan terhadap spesifikasi bahasa HTML dan CSS yang ditetapkan.

Selain itu, sebelum memeriksa, kami akan melakukan beberapa penyempurnaan pada style sheet CSS mengenai "animasi" tombol sidebar, di mana kami akan membuat tombol interaktif dari tombol statis yang mengubah tampilannya tergantung pada statusnya - pasif, aktif, dan ditekan.

• Membuat tombol menjadi besar
• Membuat tombol menjadi interaktif
• Apakah validasi diperlukan?
• Cara memvalidasi kode HTML
• Cara memvalidasi kode CSS
• File sumber situs

Membuat tombol menjadi besar

Pada artikel sebelumnya, kami mendesain area konten utama agar sesuai dengan tata letak halaman utama. Pada saat yang sama, saat ini ada tombol di bilah sisi yang statis dan terlihat seperti persegi panjang cokelat datar biasa dengan sudut membulat.

Di bawah ini adalah fragmen bilah sisi dengan tombol seperti itu.

Untuk "menganimasikan" tombol, pertama-tama kita berikan beberapa volume menggunakan gaya CSS. Dan kita akan melakukan ini menggunakan properti gradien linier, yang telah digunakan dalam desain blok rotator, pencarian, dan langganan.

Kami mendefinisikan nilai gradien linier sebagai berikut:

1. Nuansa warna akan diatur dari bawah ke atas, dimulai dengan warna yang lebih gelap dibandingkan dengan warna utama tombol. Untuk menentukan warna apa yang akan digunakan di awal gradien, kami menggunakan alat editor grafis, dalam hal ini Photoshop.

Untuk melakukan ini, dengan dokumen tata letak desain terbuka, Anda harus memilih "Pemilih Warna", arahkan kursor ke area tombol yang diperlukan, tentukan warna utama dan kemudian gunakan alat "Pemilih Warna" untuk memilih warna yang lebih gelap dengan warna coklat yang sama. Dalam kasus kami, mari kita ambil warna dengan nilai "653939". Jelas, bagaimana ini bisa dilakukan ditunjukkan pada tangkapan layar di bawah ini.

2. Selanjutnya, tentukan posisi berhenti dari gradien di mana warna awal yang lebih gelap akan masuk ke warna utama. Posisi stop akan ditempatkan kira-kira di tengah. Pada saat yang sama, untuk membuat warnanya lebih jenuh, mari kita pindahkan posisi stop sedikit ke atas, dan tentukan nilainya, katakanlah, 70% dari ketinggian.

3. Dan hal terakhir yang harus dilakukan untuk mengatur properti gradien adalah menentukan warna yang lebih terang dibandingkan dengan warna utama, yang akan mewarnai tombol di bagian atas. Ini dilakukan dengan cara yang sama seperti saat menentukan warna awal gradien. Dalam hal ini, nilai warna ini akan diambil sebagai "b88686".

3. Berdasarkan data yang diterima, kita akan menambahkan gradien linier ke properti CSS yang terbentuk sebelumnya dari tombol.

memasukkan: {

tinggi :30px;

margin-bawah :10 piksel;

radius batas :5px;

Latar Belakang :#a76d6d;

perataan teks :Tengah;

font-berat :mencolok;

warna :#ff;

mengambang :Baik;

gambar latar belakang

Dapat dicatat bahwa saat menentukan warna ekstrem, posisi stop tidak ditentukan di sini, karena tidak perlu melakukan ini dengan nilai 0% dan 100%.

Sekarang, mari kita refresh browser dan lihat hasilnya.

Seperti yang Anda lihat, tombol-tombolnya sedikit menonjol. Sekarang Anda dapat mulai "menghidupkan kembali" mereka.

Membuat tombol menjadi interaktif

Untuk sepenuhnya bekerja dengan tombol, kami akan membuatnya interaktif, yang secara visual akan mencerminkan tiga status utamanya, pasif (tombol berada dalam status awalnya), aktif (kursor diarahkan ke tombol) dan ditekan (mouse tombol ditekan dan ditahan saat kursor melayang).

Dan kita akan melakukan ini dengan menggunakan kombinasi properti bayangan dan perbatasan. Inti dari teknik ini adalah bahwa dengan mengubah warna bayangan dan batas dari sisi yang berbeda, Anda dapat membuat tiruan dari perubahan status tombol.

Pertama, mari lakukan ini untuk keadaan pasif dan coba menggambarnya sehingga tombolnya naik ke atas permukaan.

Kami memilih warna batas dan bayangan dengan cara yang sama seperti pada kasus sebelumnya.

Kode CSS setelah penambahan yang sesuai akan mengambil formulir.

memasukkan: {

tinggi :30px;

margin-bawah :10 piksel;

radius batas :5px;

Latar Belakang :#a76d6d;

perataan teks :Tengah;

font-berat :mencolok;

warna :#ff;

mengambang :Baik;

gambar latar belakang :linear-gradient(ke atas, #653939, #a76d6d 50%, #b88686);

bayangan kotak :2px 2px 4px 0px #422a2a;

lebar batas :2px;

gaya perbatasan :padat;

warna perbatasan :#ddbebe #241616 #241616 #ddbebe;

Di sini Anda dapat melihat bahwa batas diwakili oleh kombinasi properti yang menentukan ketebalan (lebar batas dengan nilai 2px), sebuah gaya ( border-style ) dengan nilai yang menentukan batas solid dan warna ( border-color ) pada masing-masing dari keempat sisinya.

Mari segarkan browser dan lihat bagaimana tampilan tombolnya sekarang.

Seperti yang Anda lihat, tombol dalam keadaan ini tampaknya telah meningkat.

Sekarang mari kita coba memberi tombol tampilan keadaan ditekan. Untuk melakukan ini, hapus bayangan, dan ubah warna batas. Dalam hal ini, kita akan menggunakan pemilih pseudo-class khusus :hover yang sesuai dengan status aktif.

Kode CSS untuk status aktif tombol akan mengambil bentuk berikut.

memasukkan: melayang-layang {

bayangan kotak :tidak ada;

warna perbatasan :#a76d6d #a76d6d #a76d6d #a76d6d;

Dalam hal ini, kami akan mengubah warna perbatasan lagi dan menambahkan bayangan, hanya dalam hal ini akan menjadi internal dan tanpa perpindahan. Pemilih kelas semu juga akan berubah menjadi :active , sesuai dengan status yang ditekan.

Kode CSS untuk status yang ditekan adalah sebagai berikut.

memasukkan: aktif {

bayangan kotak :0px 0px 7px 2px #422a2a sisipan;

warna perbatasan :#777 #fff #fff #777;

Tombol "Cari" ditampilkan di bawah untuk perbandingan, di mana Anda dapat melihat dengan jelas bagaimana perubahan tampilannya tergantung pada keadaan.

Gbr.8 Keadaan pasif

Di sinilah kami menyelesaikan tata letak halaman utama dan membawanya ke tampilan yang cocok dengan tata letak desain. Dan sekarang kita harus, seperti sebelumnya pada setiap tahap, memeriksa kesesuaian silang di browser yang berbeda. Tetapi sebelum itu, mari kita periksa halaman untuk validasi, karena status kode juga dapat mempengaruhi konsistensi silang sampai batas tertentu. Oleh karena itu, kami sekarang akan melakukan operasi yang sangat diperlukan ini.

Apakah validasi diperlukan?

Validasi adalah verifikasi kode terhadap standar yang ditetapkan. Ada validasi untuk kebenaran kode HTML dan CSS. Jelas bahwa dalam satu kasus, kode HTML diperiksa, di kasus lain, kode CSS.

Mungkin, banyak yang akan merasa aneh untuk menanyakan apakah validasi diperlukan. Tetapi jika Anda melihat di Internet, Anda dapat melihat bahwa ada banyak orang yang percaya bahwa kode yang valid adalah opsional, bahwa ini adalah pemborosan waktu, karena browser bekerja dengan baik bahkan di hadapan semua jenis kesalahan.

Tentu saja, dalam banyak kasus, situs dapat bekerja dengan baik pada kode yang tidak valid, tetapi kesesuaian silang dalam kasus tersebut tidak dapat dijamin. Lagi pula, ada standar untuk bahasa pemrograman itu sendiri, tetapi untuk fakta bahwa browser memperbaiki kesalahan dengan cara yang sama, tentu saja, tidak ada standar seperti itu dan tidak bisa. Dan oleh karena itu, browser yang berbeda dapat mengatasi kesalahan dengan cara yang berbeda, yang dapat menyebabkan tampilan halaman yang berbeda.

Dan secara umum, tidak jelas mengapa beberapa orang memiliki sikap figistik terhadap pekerjaan mereka, sesuai dengan prinsip "dan begitulah yang akan dilakukan". Oleh karena itu, jika seseorang percaya bahwa dia tidak perlu memeriksa kode untuk validitasnya, maka ini adalah haknya, dan tidak mungkin dia dapat diyakinkan sebaliknya, dan tidak perlu.

Dan sekarang mari kita beralih ke verifikasi langsung validitas kode, pertama HTML, lalu CSS.

Cara memvalidasi kode HTML

Intinya, pemeriksaan validasi kode itu sendiri cukup sederhana, seperti yang bisa kita lihat sekarang. Tapi, disini penghapusan error biasanya membutuhkan waktu tertentu. Tentu saja, jika kode terdiri dari beberapa baris, maka kesulitan tidak akan muncul di sini. Tapi, jika ada ratusan dan ribuan, maka Anda mungkin harus bekerja keras di sini, itu semua tergantung pada seberapa baik kode itu dikompilasi. Oleh karena itu, lebih baik melakukan ini lebih sering dengan pemeriksaan bersama untuk kesesuaian silang.

Di sini kami akan mempertimbangkan opsi paling sederhana dan paling umum untuk memeriksa validitas - ini adalah penggunaan situs "Konsorsium W3C", yang, dengan dukungan pengembang browser, mengembangkan spesifikasi untuk kode halaman web.

Untuk memvalidasi kode HTML, cukup ikuti tautan https://validator.w3.org/ , yang akan membuka halaman dengan kolom untuk memasukkan alamat halaman yang akan divalidasi.

tangkapan layar 51

Setelah mengklik tombol "Check", kita mendapatkan hasil dari cek tersebut.

Dalam hal ini, kode HTML valid, tetapi ada rekomendasi untuk menggunakan atribut lang dengan nilai "ru" karena halamannya menggunakan bahasa Rusia.

Atribut lang dimaksudkan untuk membuat karakter tertentu, seperti tanda kutip, dirender dengan benar oleh browser, tergantung pada bahasa yang digunakan. Oleh karena itu, akan berguna bagi kita untuk memasukkannya ke dalam kode HTML. Dan kami akan melakukan ini di tag html sehingga atribut ini dapat bertindak di seluruh dokumen.

Cara membuat penambahan ini ditunjukkan pada tabel berikut.

"ru" >

. . .

Dan sekarang, jika kita melakukan pemeriksaan kedua, kita dapat melihat bahwa kode tersebut telah benar-benar valid tanpa komentar apapun.

Dengan cara ini, kami memeriksa file yang diposting di Internet. Namun bila halaman tersebut belum diposting di web, Anda dapat memeriksa validitasnya dengan cara lain, baik dengan mengunggah file menggunakan tombol jelajah, atau dengan menggunakan formulir untuk menyalin kode HTML secara langsung.

Tangkapan layar menunjukkan opsi terakhir, ketika kode halaman web disalin langsung ke formulir untuk verifikasi.

Setelah melakukan pemeriksaan, kami mendapatkan hasil yang serupa, dan kode yang diperiksa juga akan ditampilkan di sini. Jika kesalahan ditemukan, mereka akan disorot untuk menyederhanakan pencarian, yang sangat menyederhanakan pekerjaan menghilangkannya.

Cara memvalidasi kode CSS

Kami telah membahas validasi kode HTML. Kode CSS diperiksa dalam urutan yang sama persis. Hanya dalam kasus ini, Anda perlu menggunakan halaman validator lain, yang untuk kasus ini terletak di http://jigsaw.w3.org/css-validator/ .

Mari kita buka dan, seperti waktu sebelumnya, masukkan alamat halaman yang akan diperiksa, setelah itu kita tekan tombol "Periksa".

Hasil pemeriksaan ini ditunjukkan pada tangkapan layar.

Seperti yang Anda lihat, kode CSS kami sepenuhnya sesuai dengan spesifikasi tanpa kesalahan, yang merupakan hasil yang baik.

Urutan metode validasi lain untuk kasus ini sepenuhnya bertepatan dengan pemeriksaan serupa untuk kode HTML. Oleh karena itu, kami tidak akan mengulanginya di sini dan akan mengakhiri tinjauan kami atas pemeriksaan validasi.

Setelah itu, kami akan memeriksa halaman kami untuk gambar silang dan memastikan bahwa itu ditampilkan sama di semua browser, ini akan melengkapi tata letak halaman utama situs.

Dan, kami akan melakukannya tepat setelah liburan Tahun Baru.

Dan sebagai kesimpulan, kami dapat memberi selamat kepada semua orang di Tahun Baru mendatang! Dan semoga di Tahun Baru kesehatan, cinta, kegembiraan, kemakmuran, dan, tentu saja, kesuksesan besar dalam membuat situs web Anda sendiri untuk kemungkinan pekerjaan yang sukses di Internet!

File sumber situs

File sumber situs dengan pembaruan yang dibuat dalam artikel ini dapat diunduh dari lampiran bahan tambahan.

Di salah satu artikel saya sebelumnya, saya berbicara tentang . Namun, tidak semua orang tahu itu selain validator untuk HTML, makan validator dan untuk CSS.

Berarti validitas CSS sama seperti HTML: hampir tidak relevan. Mirip dengan HTML jika kamu menulis CSS tidak valid, maka tidak akan ada masalah (kecuali, tentu saja, ada kesalahan besar), namun, kode yang valid selalu baik. Kode tersebut jelas dan terstruktur, mudah dimengerti, yang juga penting, terutama ketika dikoreksi, dan terutama oleh orang lain. Juga validitas CSS mempercepat proses pemrosesan, dan, akibatnya, kecepatan memuat halaman.

Dan, akhirnya, mengingat kepatuhan terhadap validitas yang umumnya jarang terjadi, kode yang valid selalu menuntut rasa hormat, yang penting jika Anda melakukan ini secara profesional.

Ke periksa validitas CSS, kamu harus menggunakan ini layanan W3: http://jigsaw.w3.org/css-validator/ .

Saya akan segera mengatakan itu, tidak seperti HTML, melakukan CSS valid jauh lebih mudah, karena sebagian besar hanya ada kesalahan besar, dengan pengecualian yang sebaiknya dihindari sama sekali.

Biarkan saya meringkas. Membuat kode valid sama sekali tidak diperlukan, tetapi saya sangat menyarankan melakukan ini, karena situs seperti itu akan lebih mudah diindeks oleh mesin pencari ( validitas HTML), bekerja lebih cepat, lebih mudah untuk mengedit, dan mendapatkan rasa hormat dari para profesional.

Akhir-akhir ini saya mendapat beberapa pertanyaan dari pengguna mengenai validitas tema saya dan validasi secara umum. Dalam posting ini saya ingin menjawabnya.

Apa itu validitas?

Diyakini bahwa validitas kode adalah karakteristik universal tunggal dari kode apa pun.
Faktanya, validitas adalah kepatuhan kode html dokumen dengan seperangkat aturan tertentu yang ditentukan dalam doctype atau tersirat dalam HTML5.
Artinya, validitas adalah konsep yang relatif, karena aturannya berbeda, dan persyaratannya juga berbeda.
Agar lebih jelas, saya akan memberikan contoh yang saya temukan di situs css-live.ru:

SNiP (kode dan peraturan bangunan) yang berbeda berlaku untuk konstruksi bangunan tempat tinggal dan pembangkit listrik tenaga nuklir, sehingga dokumen yang sah menurut satu perangkat aturan mungkin tidak berlaku menurut yang lain (pembangkit tenaga nuklir yang dibangun menurut standar bangunan tempat tinggal akan bagus!).

Doctype biasanya menunjuk ke dokumen yang menjadi sasaran validasi html yang direncanakan, tetapi dapat dipilih karena alasan pragmatis untuk memilih mode browser yang optimal.
XHTML5 mungkin tidak memiliki doctype sama sekali, tetapi valid.

Validasi - apa itu?

Secara sederhana, validasi adalah proses pengecekan kode dan membuatnya sesuai dengan doctype (DTD) yang dipilih.

Bagaimana validitas diperiksa?

Validitas kode HTML diperiksa oleh alat yang disebut validator.
Validator w3c paling terkenal adalah https://www.w3.org.
Validator w3c melakukan beberapa pemeriksaan kode.
Yang utama:

1. Periksa kesalahan sintaks:
   Contoh dari habrahabr.ru/post/101985 :
   adalah sintaks yang benar, meskipun adalah tag HTML yang tidak valid
   Jadi pemeriksaan sintaks sangat berguna untuk menulis kode HTML yang baik.
2. Tag cek bersarang:
   Dalam dokumen HTML, tag harus ditutup dalam urutan kebalikan dari pembukaannya. Pemeriksaan ini mendeteksi tag yang tidak ditutup atau salah ditutup.
3. Validasi HTML menurut DTD:
   Memeriksa bagaimana kode sesuai dengan DTD yang ditentukan - Definisi Jenis Dokumen (doctype). Ini termasuk memeriksa nama tag, atribut, dan tag "menyematkan" (tag dari satu jenis di dalam tag dari jenis lain).
4. Memeriksa Elemen Asing:
   Ini akan menemukan semua yang ada dalam kode tetapi tidak di doctype.
   Misalnya, tag dan atribut khusus.

Untuk memeriksa validitas kode CSS, ada validator css - http://jigsaw.w3.org/css-validator.
Validitas Kode- ini adalah hasil pemeriksaan mekanis untuk tidak adanya OB formal, sesuai dengan seperangkat aturan yang ditentukan.
Anda perlu memahami bahwa validasi adalah alat, bukan nilai itu sendiri.
Perancang tata letak yang berpengalaman biasanya tahu di mana ada kemungkinan untuk melanggar aturan validasi HTML atau CSS, dan di mana yang tidak, dan apa yang mengancam (atau tidak mengancam) kesalahan validasi ini atau itu.
Contoh saat situs tidak membuat kode yang valid:

• lebih nyaman dan lebih cepat - atribut khusus untuk Javascript/AJAX atau
• SEO dioptimalkan - markup ARIA.

Jelas bahwa tidak ada gunanya validitas demi validitas.
Sebagai aturan, desainer tata letak yang berpengalaman mematuhi aturan berikut:
- Seharusnya tidak ada kesalahan besar dalam kode.
- Yang kecil dapat ditoleransi, tetapi hanya untuk alasan yang dapat dibenarkan.
Mengenai kesalahan validasi html/CSS:

Kesalahan validasi (VF) dapat dibagi menjadi beberapa kelompok:

• OV dalam file template:
  Mereka tidak sulit ditemukan dan diperbaiki.
  Jika ada kesalahan kecil yang membantu membuat situs lebih berfungsi atau lebih cepat, kesalahan tersebut dapat dibiarkan.
• OV dalam skrip pihak ketiga yang terhubung di situs:
  Misalnya, widget Vkontakte, skrip Twitter, atau file video YouTube.
  Tidak ada cara untuk memperbaikinya, karena file dan skrip ini terletak di situs lain dan kami tidak memiliki akses ke sana.
• Aturan CSS yang tidak dipahami validator:
  Validator memeriksa apakah kode situs cocok dengan versi HTML atau CSS tertentu.
  Jika Anda menggunakan aturan CSS versi 3 dalam template, dan validator memeriksa versi 2.1, maka semua aturan CSS3 akan dianggap sebagai kesalahan, meskipun sebenarnya tidak.
• OV, yang tanpa sadar harus ditinggalkan di situs untuk mendapatkan hasil yang diinginkan. Sebagai contoh:
  • tag noindex. Mereka tidak valid, tetapi mereka sangat diperlukan dan kita harus menerimanya.
  • dril. Untuk mendapatkan tampilan situs yang benar di beberapa browser, terkadang Anda harus menggunakan peretasan - kode yang hanya dipahami oleh browser tertentu.
• Kesalahan validasi.
  Seringkali dia tidak melihat tag apa pun (misalnya, tag penutup) dan melaporkan tentang OB yang tidak ada.

Ternyata di situs kerja hampir selalu ada semacam OV.
Apalagi jumlahnya bisa sangat banyak.
Misalnya, halaman utama Google, Yandex, dan mail.ru masing-masing berisi beberapa lusin kesalahan.
Tapi, mereka tidak merusak tampilan situs di browser dan tidak mengganggu pekerjaan mereka.
Semua yang tertulis di atas berlaku untuk topik saya.

Topik kompleks meliputi:

• Fitur WordPress (mis. the_category()), yang memberikan kode yang tidak valid.
• Keluaran video dari situs hosting video, misalnya, dari YouTube, dan ada banyak OB dalam kode YouTube, yang tidak dapat Anda atau saya pengaruhi.
• Tombol jejaring sosial yang terhubung menggunakan skrip jaringan ini dan berisi OB.
• Aturan CSS3 dan HTML5 dianggap bug oleh validator versi lama.
  Pada saat yang sama, validator versi CSS3 dan HTML5 menganggap aturan lama sebagai kesalahan :).
• Terkadang, untuk mencapai tampilan yang benar di browser Internet Explorer atau versi lama dari browser lain, Anda harus menggunakan apa yang disebut peretasan - kode yang hanya dipahami oleh browser tertentu untuk menulis aturan tampilan situs untuk browser khusus ini.

Akibatnya, Anda bisa mendapatkan kode yang benar-benar valid hanya saat memaparkan topik yang sangat sederhana, mis. mereka yang berisi jumlah minimum fungsionalitas.
Setelah menyelesaikan tata letak salah satu topik saya, saya selalu memeriksanya dengan validator dan memperbaiki semua OB yang dapat diperbaiki tanpa kehilangan fungsionalitas topik.
Artinya, jika ada pilihan antara fungsionalitas yang berfungsi dan validitas, saya memilih fungsionalitasnya.
Jika Anda membuat tema sendiri, saya menyarankan Anda untuk melakukan hal yang sama.
Dari sudut pandang saya (dan juga dari sudut pandang sebagian besar perancang tata letak), sikap terhadap validasi html/CSS sebagai kebenaran tertinggi adalah salah. Adalah wajib untuk mengoreksi hanya OB yang:
- mencegah browser menampilkan halaman dengan benar (tag tidak tertutup dan bersarang salah).
- memperlambat pemuatan halaman (skrip yang tidak terhubung dengan benar).
- dapat diperbaiki tanpa merusak fungsi tema.
Saya harap saya menjawab semua pertanyaan Anda tentang validasi.

Saya telah menyebutkan apa yang ada dalam hal validitas kode html. Ini harus dilakukan setidaknya sesekali, karena keabsahan baik html dan css sangat memengaruhi situs, yaitu, tampilan sumber daya Anda yang identik di browser yang berbeda (artikel umum tentang browser web populer dan terbaik, yang saya harap akan membantu Anda membuat pilihan yang mendukung salah satunya).

Selain itu, saya telah menyebutkan bahwa terlepas dari kenyataan bahwa mesin pencari pada tahap ini tidak memperhitungkan kesalahan kode CSS dan HTML ketika memberi peringkat situs, di masa depan semuanya dapat berubah dan Anda bisa mendapatkan situasi di mana proyek yang dirancang dengan indah, dibuat untuk orang-orang, mungkin kehilangan beberapa audiens potensial karena fakta bahwa itu tidak lulus validasi. Nah, itu semua lirik, di sini semua orang memutuskan sendiri seberapa penting semuanya.

Saya pikir Anda sekarang akrab dengan pendapat saya, karena saya menulis artikel ini, yang berarti saya menganggapnya layak untuk diperhatikan bersama dengan, misalnya, bagian penting dari pengoptimalan seo seperti tautan penutup dan fragmen teks dari pengindeksan Google dan Yandex atau penggunaan yang kompeten.

Oke, seperti yang mereka katakan, lebih ke intinya. Pertama, sedikit tentang CSS. css( Lembar Gaya Cascading- Cascading Style Sheets) adalah bahasa gaya yang mendefinisikan tampilan dokumen HTML. Artinya, jika HTML mendeskripsikan konten halaman, maka CSS memformat konten ini, dengan kata lain, memberikan tampilan yang lengkap. Omong-omong, untuk meningkatkan kecepatan situs, akan berguna untuk menggesek file tema Anda.

Validator W3C: Memeriksa Validitas Kode CSS

Sekarang mari kita beralih ke cara memeriksa validitas suatu dokumen (halaman situs web kita atau blog WordPress). Seperti halnya memeriksa kode HTML, kita akan menggunakan salah satu dari . Mari kita pergi ke layanan validasi CSS:

Seperti yang Anda lihat, ada tiga cara untuk memvalidasi CSS dengan validator W3C. Omong-omong, perhatikan bahwa di bagian bawah halaman validator ada catatan yang menunjukkan perlunya memeriksa validitas kode HTML. Hanya kedua kode yang benar yang menjamin kebenaran seluruh dokumen. Masukkan URL untuk diperiksa. Sebagai contoh, mari kita periksa halaman utama blog saya:

Hasil pemeriksaan validator W3C untuk kesalahan kode CSS tidak bisa disebut mengecewakan, karena hanya 2 kesalahan yang ditemukan. Tentu saja, kesalahan ini berbeda, dalam setiap kasus mereka menyebabkan konsekuensi yang berbeda. Mari kita lihat apa yang bisa kita lakukan untuk menghilangkannya. Semuanya nyaman di sini, karena validator W3C tidak hanya memberikan tautan ke dokumen yang berisi kode yang salah, tetapi juga nomor baris tempat dokumen itu berada. Omong-omong, di bawah, setelah daftar peringatan dan kesalahan, varian kode CSS yang benar akan ditampilkan, yang dapat Anda gunakan:

Ada tautan ke dokumen di halaman hasil validasi CSS css.ie, yang terletak di folder tema. Itu dibuat untuk mencapai blog lintas-browser (tampilan yang sama di browser populer). Selain itu, untuk berbagai modifikasi Internet Explorer, yang berdosa dengan berbagai "jambs" dalam hal mendistorsi tampilan situs, terutama versi yang lebih lama (IE9 jauh lebih baik dalam hal ini). Kompatibilitas lintas browser sangat penting untuk kemajuan proyek, namun, setelah diperiksa, ternyata dokumen ini berisi properti yang tidak sesuai dengan standar W3C.

Jadi, kami mendapatkan baris 3 dan 12, yang mengandung kesalahan. Untuk memperbaikinya, hapus kesalahan parse html (filter: ekspresi(document.execCommand("BackgroundImageCache", salah, benar));) dan properti .Perbesar. Sekarang saya tidak akan membahas seluk-beluk pemrograman dan tata letak situs, saya hanya akan mencatat bahwa properti ekspresi membantu menghilangkan efek kedipan gambar latar belakang yang mengganggu yang terjadi di IE6.

Artinya, di browser, penggunaannya menjadi sia-sia, dan dalam versi selanjutnya "kesalahan" ini tidak lagi diamati. Saya harus segera mengatakan bahwa saya masih akan menggunakan "obat" ini untuk beberapa waktu, sampai jumlah pengunjung potensial yang menggunakan IE6 mencapai level minimum. Namun, untuk kejelasan, untuk menunjukkan kepada Anda bagaimana validator W3C akan bereaksi terhadap ini, saya akan menghapusnya.

Properti The.zoom, yang menetapkan faktor penskalaan suatu elemen, bukan bagian dari Standar Internasional W3C, dan didukung oleh Opera versi lama, browser Safari, termasuk IE8(Versi 9 hampir sepenuhnya "taat hukum", jadi saya harap segera, webmaster akan dibebaskan dari kebutuhan untuk menggunakan peretasan, yaitu kode tambahan untuk mencapai kompatibilitas lintas-browser maksimum). Sekarang mari kita lihat dokumen yang berisi elemen yang tidak valid dan perbaiki:

Dokumen ini ada di folder tema Cloudy saya, saya menghapus item di atas yang tidak lolos pemeriksaan validasi. Selanjutnya, dalam hasil pemeriksaan validitas, selain kesalahan, juga banyak yang disebut peringatan:

Misalnya, saya akan mencoba menunjukkan dengan jelas bagaimana menyingkirkan yang paling umum dari mereka, dan di sepanjang jalan, menjelaskan artinya. Seperti yang Anda lihat, validator W3C memperingatkan tentang adanya warna yang sama untuk teks dan latar belakang. Saya harus mengatakan bahwa ini umumnya tidak diinginkan dalam hal apa pun, karena mesin pencari dapat menganggap keadaan ini sebagai menyembunyikan informasi, yang penuh dengan sanksi serius.

Tentu saja, ini tidak selalu terjadi, tetapi bahaya ini tidak boleh diremehkan. Jadi, mari kita lanjutkan untuk memperbaiki situasi. Yang terbaik adalah menyalin file style.css tema Anda dalam HTML dan PHP, editor notepad++ yang saya bicarakan memudahkan pencarian berdasarkan nomor baris:

Sekarang kami tahu di mana garis-garis ini berada di file tema Anda, kami memperbaiki warnanya dengan sedikit mengubah rona. Dalam sistem warna heksadesimal, #ffffff sesuai dengan putih. Kami mengubahnya sebagai berikut: alih-alih f terakhir kami memasukkan d, dengan demikian kami mendapatkan warna putih yang sedikit berbeda; sekarang perubahannya tidak akan terlihat oleh pengguna, tetapi mesin pencari akan melihat perbedaannya:

Ini adalah bagaimana Anda dapat memperbaiki bagian yang tidak valid dari kode CSS halaman sumber daya Anda. Dengan cara yang sama, kami menemukan sisa bagian yang ditandai dengan peringatan dan yang perlu diperbaiki.Untuk peringatan tentang baris 483 (omong-omong, ada banyak, sekitar 10). Setelah memeriksa, saya menemukan bahwa penyebabnya adalah plugin WP Page Numbers, yang menyediakan pagination.

Ini mendorong saya untuk menonaktifkan plugin ini dan merupakan alasan saya akhirnya menggantinya dengan injeksi kode, yang merupakan langkah untuk mengurangi beban server. Segera setelah saya melakukan ini, peringatan tentang pelanggaran validitas kode oleh plugin khusus ini menghilang segera setelah pemeriksaan ulang. Setelah gerakan di atas, kami memeriksa kembali validitas CSS menggunakan validator W3C:

Sekarang Anda tahu cara memeriksa validitas dokumen CSS (halaman web situs web atau blog) menggunakan validator W3C. Sebagai kesimpulan, saya ingin mencatat bahwa setiap orang memutuskan sendiri tingkat dan frekuensi memeriksa validitas kode CSS, itu semua tergantung pada keadaan, tetapi bagaimanapun, dari waktu ke waktu ini harus dilakukan, dengan keyakinan mendalam saya. Berlangganan pembaruan blog untuk menerima materi baru melalui email. Oleh karena itu, izinkan saya untuk mengambil cuti saya, saya berharap kita berpisah untuk sementara waktu.

Validasi mengacu pada pengecekan kode CSS terhadap spesifikasi CSS2.1 atau CSS3. Dengan demikian, kode yang benar yang tidak mengandung kesalahan disebut valid, dan kode yang tidak memenuhi spesifikasi disebut tidak valid. Paling mudah untuk memeriksa kode melalui situs http://jigsaw.w3.org/css-validator/, menggunakan layanan ini Anda dapat menentukan alamat dokumen, mengunggah file, atau memeriksa teks yang diketik. Nilai tambah besar dari layanan ini adalah dukungan bahasa Rusia dan Ukraina.

Periksa URI

Tab ini memungkinkan Anda untuk menentukan alamat halaman yang dihosting di Internet. Protokol http:// dapat dihilangkan, itu akan ditambahkan secara otomatis (Gbr. 1.42).

Beras. 1.42. Verifikasi dokumen berdasarkan alamat

Setelah memasukkan alamat, klik tombol "Periksa" dan salah satu dari dua tulisan akan muncul: "Selamat! Tidak ada kesalahan yang ditemukan" pada keberhasilan, atau "Sayangnya, kami menemukan kesalahan berikut" pada kode yang tidak valid. Pesan kesalahan atau peringatan berisi nomor baris, pemilih, dan deskripsi kesalahan.

Periksa file yang diunggah

Tab ini memungkinkan Anda memuat file HTML atau CSS dan memeriksa kesalahannya (Gambar 1.43).

Beras. 1.43. Memeriksa file saat mengunggahnya

Layanan secara otomatis mengenali jenis file dan, jika dokumen HTML ditentukan, mengekstrak gaya darinya untuk validasi.

Periksa teks yang diketik

Tab terakhir adalah untuk memasukkan kode HTML atau CSS secara langsung, dan hanya gaya yang akan dicentang (Gbr. 1.44).

Beras. 1.44. Memeriksa kode yang dimasukkan

Opsi ini tampaknya paling nyaman untuk melakukan berbagai eksperimen pada kode atau dengan cepat memeriksa fragmen kecil.

Pilihan versi CSS

CSS3 memiliki banyak properti gaya baru dibandingkan dengan versi sebelumnya, jadi Anda harus memeriksa kode Anda terhadap versi tersebut. Secara default, layanan menentukan CSS2.1, jadi jika Anda ingin memeriksa kode Anda terhadap CSS3, Anda harus menentukannya secara eksplisit. Untuk melakukan ini, klik teks "Fitur tambahan" dan di blok yang terbuka, dari daftar "Profil", pilih CSS3

Beras. 1.45. Menentukan Versi CSS untuk Diperiksa

Pengidentifikasi dan kelas

Secara berkala, perselisihan muncul tentang kelayakan menggunakan pengidentifikasi dalam tata letak. Argumen utama adalah bahwa pengidentifikasi adalah untuk mengakses dan memanipulasi elemen halaman web menggunakan skrip, dan hanya kelas yang harus digunakan untuk mengubah gaya elemen. Pada kenyataannya, tidak masalah gaya apa yang ditetapkan, tetapi Anda harus mengetahui beberapa fitur pengenal dan kelas, serta jebakan yang dapat diharapkan oleh pengembang.

Untuk memulainya, kami mencantumkan fitur karakteristik dari penyeleksi ini.

pengenal

Dalam kode dokumen, setiap pengenal bersifat unik dan hanya boleh disertakan sekali.

Nama pengenal peka huruf besar/kecil.

Melalui metode getElementById, Anda dapat mengakses elemen dengan ID-nya dan mengubah properti elemen tersebut.

Gaya untuk pengidentifikasi lebih diutamakan daripada kelas.

Kelas dapat digunakan beberapa kali dalam kode.

Nama kelas peka huruf besar/kecil.

Kelas dapat digabungkan satu sama lain dengan menambahkan beberapa kelas ke satu tag.

pengenal

Jika Anda ingin mengubah gaya beberapa elemen dengan cepat atau menampilkan beberapa teks di dalamnya saat halaman web sedang berjalan, ini jauh lebih mudah dengan pengidentifikasi. Elemen diakses melalui metode getElementById, yang parameternya adalah nama pengenal. Contoh 1-70 menambahkan pengidentifikasi bernama namapengguna ke bidang teks formulir, kemudian menggunakan fungsi JavaScript untuk memeriksa apakah pengguna telah memasukkan beberapa teks ke dalam bidang. Jika tidak ada teks, tetapi tombol Kirim diklik, sebuah pesan ditampilkan di dalam tag dengan pesan ID. Jika semuanya benar, data formulir dikirim ke alamat yang ditentukan oleh atribut tindakan.

Contoh 1.70. Validasi data formulir XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6