Memecahkan masalah dengan CSS. Mengapa CSS sangat penting di mana saya dapat menulis CSS

Pendekatan semacam itu besar karena beberapa alasan:

• tabel di HTML berbagai: Mereka membutuhkan banyak kode template;
• menandai adalah secara semantik salah: Tabel harus digunakan untuk data multidimensi;
• mengubah tata letak diperlukan perubahan markup: Jika kita ingin memindahkan kolom kiri ke kanan, seharusnya ubah struktur HTML.;
• tabel rentan kesalahan sintaksis: garis dan sel untuk kebenaran harus pergi dan berinvestasi dengan cara tertentu;
• menandai adalah tidak terbaca: Tabel diinvestasikan di tabel lain untuk mendapatkan kolom tambahan di dalam kolom.

Itu sebabnya dari aplikasi tabel sebagai alat perlahan-lahan menolak dan bukannya menggunakan CSS.

Apa itu CSS.

CSS (Cascading Style Sheets) berarti lembar gaya cascading dan merupakan bahasa markup gaya (sebagai HTML atau XML). Dengan demikian, CSS tidak mewakili apa pun dalam dirinya sendiri, jika tidak terkait dengan dokumen HTML.

CSS dibawa kehidupan Dalam dokumen HTML, memilih font, menerapkan warna, mendefinisikan indentasi, elemen penentuan posisi, animasi interaksi dan banyak lagi.

Bagaimana CSS bekerja

CSS. memilih Elemen html (misalnya, paragraf), bertanya properti Untuk mengubah (seperti warna) dan menerapkan tertentu nilai (misalnya, merah):

P (Warna: Merah;)

Kata "gaya" bisa menipu. Anda mungkin berpikir CSS hanya digunakan untuk mengubah warna teks, ukuran dan jenis font. Tetapi CSS dapat mengatur tata letak dokumen HTML, menentukan tinggi, lebar, bidang internal dan eksternal, posisi, kolom, dll.

Di mana saya dapat menulis CSS?

CSS sebagai atribut

Anda dapat menulis CSS secara langsung dalam elemen HTML menggunakan atribut gaya:

Ini adalah teks penting.

CSS B.

Anda dapat menggunakan tag

Paragraf ini akan berwarna merah.

CSS dalam file terpisah

Anda dapat menulis CSS Anda dalam file terpisah dengan ekstensi. CSS, dan kemudian ikat dari HTML menggunakan tag .

P (Warna: Merah;)

Paragraf ini akan berwarna merah.

Dokumen HTML ini, yang "memanggil" file CSS, dalam kasus kami, file bernama style.css terletak di folder yang sama dengan file CSS.

Ini metode ketiga.menggunakan file CSS terpisah adalah lebih disukai.

Tabel Gaya Cascade (CSS) digunakan untuk membuat halaman web menarik di mata pengunjung. Selain itu, meja CSS Styles sangat menyederhanakan proses pengembangan halaman web. Juga CSS memungkinkan Anda membuat perubahan di satu tempat, dan tidak mengedit seluruh situs. Dengan demikian, Anda tidak perlu mengunjungi setiap halaman web situs dan mengeditnya.

CSS menghemat waktu dan energi Anda yang berharga. Lembar gaya kaskade, sebagai berikut dari nama, menentukan gaya tertentu untuk halaman web berdasarkan daftar prioritas, biasa disebut "kaskade". Selain itu, ia juga memungkinkan Anda untuk mengelola berbagai elemen di halaman web situs Anda. Satu tabel gaya CSS dapat mengontrol font, memformat, ukuran teks, posisi, gaya dan warna seluruh situs web. Meskipun lembar gaya cascading dapat mengubah presentasi dan penampilan situs web Anda, namun, mereka tidak ada hubungannya dengan desain situs web.

CSS dapat membantu Web Master dalam banyak hal. Berkat situs web CSS akan memiliki desain yang lebih menarik. Pada saat yang sama, bahkan mesin pencari lebih menyukai situs web berbasis CSS ketika datang untuk menugaskan mereka peringkat dalam indeks pencarian.

Pemisahan presentasi situs dari isinya.

Dengan CSS, Anda bisa mendapatkan kendali hebat atas penampilan situs Anda, karena teknologi ini memungkinkan Anda untuk menautkan gaya yang berbeda dengan teks situs Anda. Akibatnya, jika Anda perlu mengubah tampilan elemen apa pun dari halaman web, maka Anda harus mengedit hanya satu tabel eksternal dari tabel CSS Styles, dan ini akan memengaruhi seluruh situs web. Pendekatan ini tidak hanya menyediakan proses manajemen yang fleksibel, tetapi juga menghemat waktu.

Tingkatkan kecepatan pemuatan situs.

Karena lembar gaya cascading adalah file teks, berat badannya sedikit dan gunakan lebih sedikit bandwidth, yang pada gilirannya meningkatkan kecepatan mengunduh situs Anda. Menurut statistik, situs yang menggunakan lembar gaya berbasis CSS eksternal dimuat sekitar tujuh kali lebih cepat daripada situs serupa tanpa teknologi ini. Karena dokumen teks dimuat dengan sangat cepat, halaman web akan ditampilkan hampir dalam beberapa detik, dan ini akan memiliki efek positif pada kesan umum pengunjung saat mengunjungi situs Anda.

CSS memudahkan untuk mengubah posisi barang apa pun di halaman web. Misalnya, menu dapat ditempatkan di tempat mana pun: kiri, kanan, atas atau bawah. Pada saat yang sama, tujuan utama dari posisi elemen tersebut adalah bahwa robot mesin pencari pertama-tama memindai konten utama situs web Anda. Untuk mencapai ini, semua elemen bantu diperlukan, seperti menu, dalam kode HTML untuk menempatkan setelah konten utama.

Kompatibilitas CSS dengan browser modern.

Karena saat ini ada banyak browser yang berbeda, master web sulit untuk memeriksa kinerja situs secara mutlak di semua browser. Namun, jika Anda tetap berpegang pada tata letak berbasis CSS standar, maka masalah ini menjadi mudah dipecahkan.

Seperti yang dapat dilihat dari fentoing, teknologi CSS berada di luar apa yang menyediakan alat untuk menciptakan situs modern yang menarik, juga membantu menyelesaikan sejumlah masalah. Itu dengan sendirinya menentukan signifikansi tinggi CSS.

Salah satu layanan tertua di Internet adalah forum. Situs komunikasi ini muncul di antara yang pertama dan sejak itu tetap dalam bentuk yang hampir tidak berubah. Tetapi meskipun usia mereka solid, mereka seperti sebelum mereka mengatasi fungsinya. Di sini orang berkomunikasi, mengajukan pertanyaan dan menerima jawaban.

Halo, situs web pembaca blog yang terhormat. Hari ini saya ingin berbicara tentang apakah Anda mungkin perlu ketika Anda bekerja dengan pengetahuan tentang bahasa HTML (baca tentang apa itu), dasar-dasar bekerja dengan tabel cascading CSS (artikel pengantar tentang topik yang akan Anda temukan), serta Memahami setidaknya fondasi dan prinsip, membangun program dalam PHP dan logika bekerja dengan basis data MySQL.

memungkinkan Anda melakukan situs, tidak memiliki Semua yang disebutkan di atas kebijaksanaan, tetapi pada saat yang sama, Anda mungkin akan memiliki pertanyaan dan masalah yang tidak dapat Anda pecahkan berarti bahkan CMS yang paling tepercaya (Joomla, WordPress, Drupal, dll.).

Mengapa Anda perlu saat mengerjakan pengetahuan situs bahasa (markup, gaya, pemrograman server)

Entah Anda tidak akan menemukan item seperti itu dalam lutut CMS di antara banyak pengaturan lain (logika penulis mesin saat menetapkan beberapa pengaturan tetap tidak dapat dipahami dan, mungkin, kekuatan kebiasaan penulis) dimainkan di sini, diputar di sini, Atau pengembang tidak akan memasukkan item seperti itu dalam administrasi sistem manajemen konten sama sekali. Tidak mungkin untuk mengimplementasikan pengaturan untuk semua melalui admin - di sana, biasanya, hanya pengaturan yang paling diperlukan dan sering digunakan ditampilkan.

Sering terjadi lebih mudah untuk memecahkan masalah Tidak biasa disediakan di administrator dengan cara, tetapi secara langsung, hak sesuatu dalam database atau menyesuaikan isi file mesin tertentu melalui akses ke FTP.

Ya, untuk ini perlu menghabiskan waktu untuk mempelajari setidaknya fondasi bahasa markup HTML, untuk memahami bagaimana tabel gaya kaskade mempengaruhi penampilan Webons, serta berurusan dengan perangkat basis data, pelajari cara berubah saya t. Dan, mungkin, hal yang paling sulit adalah memahami prinsip-prinsip dasar untuk menulis kode dalam bahasa PHP untuk memahami apa dan di mana dimungkinkan untuk berubah tanpa rasa sakit, dan apa yang tidak dapat disentuh.

Saya akan mulai, tentu saja, dengan desain Webons (sebenarnya, saat ini saya telah menyelesaikan kasus ini dan Anda dapat membiasakan diri dengan hasil dan). Seperti yang saya sebutkan dalam salah satu posting sebelumnya, hingga saat ini, semua sumber daya terdiri dari halaman HTML. Selain itu, konten situs web (teks, gambar, tabel) dan desainnya (warna, latar belakang, indentasi) diminta.

Dalam pemahaman modern tentang kebenaran vertex, pengisian harus dilakukan dengan menggunakan tag bahasa markup hypertext, dan desain isian ini harus disebabkan oleh tabel file eksternal. Pemisahan seperti itu memungkinkan Anda untuk membongkar halaman situs web dari kode layanan berlebih.

Faktanya adalah bahwa mesin pencari sangat berniat menonton rasio komponen informasi Kode halaman web (teks ditampilkan di browser) dan komponen layanannya (tag, berbagai skrip, dll.). Oleh karena itu, dengan melakukan keluar dari halaman ini, segala sesuatu yang tidak menanggung komponen informasi, tetapi hanya bertanggung jawab untuk menghias halaman, kami meningkatkan rasio mesin pencari untuk proyek kami (baik, setidaknya secara teori).

Plus, daftar aturan CSS yang dibuat untuk file terpisah memungkinkan Anda untuk menyatukan desain sumber daya. Jika perlu, akan selalu mungkin untuk mengubah sesuatu dalam desain bukan kode yang tepat dari semua Webons, karena Dalam hal ini, itu akan cukup untuk memperbaiki properti gaya baru yang ada atau menambah dalam gaya semua halaman dengan gaya gaya.

Dengan penampilan tabel gaya banyak tag bahasa hypertext markup dan atributnya mulai dianggap ketinggalan jaman dan tidak direkomendasikan untuk digunakan. Sebaliknya, mereka disarankan untuk menggunakan properti CSS yang melakukan tindakan yang sama. Ini tidak berarti bahwa HTML sekarang tidak perlu dipelajari, cukup penurunan jumlah tag dan atributnya yang perlu diketahui dan dapat digunakan untuk membuat dan memelihara dalam keadaan yang tepat dari situs. Saya akan mencoba menceritakan tentang tag-tag yang saya sendiri gunakan.

Di mana editor lebih baik untuk mengedit atau membuat perubahan pada kode

Tidak ada yang sulit dalam hal ini, karena sebenarnya itu bahkan bukan bahasa pemrograman, tetapi penandaan hypertext, sesuatu yang mirip dengan sintaksis dalam bahasa Rusia. Apa yang ingin saya sarankan, mengandalkan pengalaman Anda sendiri? Cobalah untuk menulis tag sendiri di Notepad, ketik Notepad ++. (Baca milikku), dan bukan dalam program, seperti drimvuver. Mengapa?

Ya, karena dalam hal ini Anda merindukan tangan Anda dan mengingat tag dan atribut menulis. Ya, dalam program tipe Dreamvyver, lebih nyaman untuk menjadi atas. Anda dapat segera melihatnya di browser, dan opsi penulisan untuk tag ini atau itu dapat dipilih dari daftar drop-down.

Tetapi faktanya adalah bahwa Anda pada dasarnya harus memerintah kode yang ada di file-file mesin Anda dan akan jauh lebih nyaman jika Anda akan mengingat tulisan semua tag dan atributnya dengan hati (manfaatnya tidak begitu banyak). Mengapa, untuk memperbaiki satu tag, buka file di Dreamvier yang rumit, ketika ada cukup notebook biasa untuk keperluan ini, yah, atau mitra lanjutannya untuk nama non-tipe plus plus (tautan sedikit lebih tinggi).

Meskipun, ini pendapat pribadi saya (IMHO) dan Anda memutuskan apa yang lebih nyaman. Misalnya, Evgeny Popov, tentu saja, saya mempelajari semua kasus ini, rupanya, penganutnya drimvyever. Penting pada prinsipnya satu - sehingga Anda memerintah kode dalam editor yang mampu mempertahankan semua perubahan yang dilakukan dan yang mungkin, jika diinginkan, kembalikan semuanya seperti itu (kembali).

Dalam hal ini, tidak peduli bagaimana Anda bertentangan, semuanya akan dapat diperbaiki. Dan, tentu saja, iluminasi sintaks dari bahasa tempat Anda menulis atau mengedit kode sangat nyaman. Notepad ++ - Ini jelas pilihan saya! Saya memberi tahu tentang kemungkinannya di artikel itu nanti.

Mungkin menceritakan tentang markup dan desainnya pada gilirannya tidak akan benar, jadi saya akan mencoba berbicara tentang berbagi mereka. Harus dipahami bahwa sifat CSS dicatat dalam satu atau lebih file individual yang dapat Anda temukan dengan mudah dalam topik pendaftaran yang digunakan untuk mesin Anda.

Sementara tag web dalam CMS modern tidak direkam dalam beberapa file atau lebih, seperti sebelumnya, dan dihasilkan (ditafsirkan) dari PHP. Dan itu adalah kode yang telah dihasilkan dengan cara ini bahwa browser diterapkan ke browser sehingga pada gilirannya menginterpretasikannya ke halaman terbuka untuk kita. Heathwood, bukan?

karena itu edit tag di CMS Ini bukan tugas sepele, bahkan jika Anda sepenuhnya lega dengan bahasa hypertext markup. Lagi pula, tag Anda harus memerintah dalam file PHP dan, oleh karena itu, Anda perlu mengetahui setidaknya konsep dasar dan sintaksnya.

Tapi jangan khawatir, untuk mengedit desain pengetahuan besar di PHP dari Anda tidak perlu. Tags ada kebohongan, bagaimana mengatakannya, di permukaan dan tidak terlalu sulit untuk mengidentifikasi dan memperbaiki jika perlu.

Alat apa yang dapat Anda gunakan

Masalah muncul, sebagai aturan, di sisi lain. Bagaimana menemukan file itu dengan ekstensi PHP di mana fragmen tag yang diperlukan dibentuk? Ini adalah masalah masalah. Ya, tentu saja, jika Anda memiliki pengalaman dalam bekerja dengan mesin data, maka Anda, saya pikir, Coeal. Tetapi jika Anda baru dan tidak tahu sebesar ratusan file PCP mana yang bertanggung jawab?

Akan ada untuk membantu Anda dengan plugin yang luar biasa untuk browser yang sama megah, serta Notepad ++ yang disebutkan di atas, dan tidak disadari banyak. Banyak program ini akan membantu Anda untuk memutar pegunungan dan akan menghemat banyak waktu.

Di posting terdekat, saya akan memberi tahu secara rinci bagaimana menggunakan program-program ini untuk secara efektif membahas masalah yang muncul dengan situs. Ya, saya hampir lupa tentang program yang sangat diperlukan yang memungkinkan Anda untuk mengakses FTP - FileZilla (sudah ada artikel tentang topik ini). Ya, tentu saja, mari kita bicara.

Nah, tujuannya diuraikan, tugas disampaikan, tetap hanya untuk melakukan mereka. Untuk SIM, biarkan Anda mendeklarasikan.

Semoga sukses untukmu! Untuk pertemuan ambigu di situs web halaman blog

Anda mungkin tertarik

Font Rusia yang indah untuk situs dan komputer di layanan Google Font Online - tempat untuk mengunduh dan cara menginstal Desain Adaptif (Responsif) - Optimasi Situs untuk melihatnya di perangkat seluler
Gif, png atau jpg - format grafis raster untuk web, pro dan kontra mereka saat digunakan di situs

Terkadang perilaku CSS dapat membingungkan. Pelajari tentang beberapa sifat licik yang dapat menyebabkan masalah paling umum, dan bagaimana masalah ini dapat diselesaikan.

CSS berantakan. CSS pertama kali diimplementasikan pada tahun 1995, dan awalnya dimaksudkan untuk tidak bergaya situs web dan aplikasi web, tetapi untuk tipografi dokumen teks sederhana. Sejak itu, CSS telah melewati jalan yang sulit. Mungkin terlalu rumit.

Pertama-tama, CSS tidak dimaksudkan untuk tata letak dokumen multikolon, antarmuka adaptif, dan banyak lainnya. Itulah sebabnya dia telah menjadi lidah dengan banyak peretasan dan gangguan, semacam mesin uap yang luar biasa dengan banyak ekstensi dan baris.

Di sisi lain, itu membuat CSS agak lucu. Dan sampai batas tertentu - kita dimiliki oleh fakta bahwa kita memiliki pekerjaan. Saya benar-benar yakin bahwa pengembangan CSS lintas-browser yang benar-benar tidak memungkinkan, dan itu tidak mungkin terjadi di masa mendatang.

Bagaimanapun, saya tidak menulis untuk mengekspresikan keyakinan dan ketidakpuasan saya, tetapi untuk berbicara tentang CSS. Hari ini kami akan mengajukan pertanyaan tentang beberapa masalah umum dan mencoba solusi kami untuk menyelesaikannya.

Pembersihan aliran (Float Clearing) - Pertanyaan lama sebagai dunia

Saya pikir ini adalah pertanyaan paling umum yang menyebabkan bingung ketika mencoba menata item. Dia sudah tua seperti dunia, jadi saya 100% yakin bahwa siapa pun yang pernah menulis gaya pada CSS masuk ke perangkap serupa.

Pada dasarnya, ketika elemen berisi blok terapung di dalam (float), itu "runtuh" \u200b\u200b- mengambil tinggi minimum. Ini terjadi karena elemen mengambang dikeluarkan dari total aliran elemen, sehingga blok di mana elemen-elemen ini dibungkus, berperilaku seperti tidak mengandung anak perusahaan.

Ada banyak jalur yang memungkinkan Anda untuk memperbaiki perilaku ini. Di masa lalu harus menambah kosong jaman dengan properti jelas: keduanya. Setelah semua elemen terapung, di ujung wadah. Anda juga bisa memilikinya jaman Ganti tag sDM. - Juga bukan pilihan terbaik.

Tetapi Nicolas Gallagher mengusulkan cara baru untuk membersihkan aliran dalam elemen induk tanpa kontaminasi markup dengan tag tambahan. Setelah diskusi dan tes turbulen, versi kerja diidentifikasi dengan serangkaian properti minimum, versi terbaru yang diberikan di sini:

ClearFix: Setelah (konten: ""; Tampilkan: Tabel; Hapus: keduanya;)

Bahkan, saya berbohong mengatakan bahwa versi ini adalah yang terbaru, tetapi jelas merupakan opsi yang paling dioptimalkan. Jika Anda memerlukan dukungan untuk IE 6/7, maka Anda memerlukan kode opsional ini:

Yang benar-benar Anda butuhkan adalah menentukan kelas .clearfix. Dalam proyek Anda, yang kemudian Anda dapat meresepkan elemen di mana Anda ingin membersihkan aliran. Ini adalah cara termudah untuk bekerja dengan elemen terapung.

Bagaimana cara menangani ruang antara elemen inline-blok?

Mari kita coba atur item ke satu baris, tetapi tanpa menggunakan properti. mengapung., saat mendefinisikan mereka sebagai item blok lurus (inline-block). Properti tampilan: blok inline Untuk waktu yang lama, itu tetap undervalued dan sedikit digunakan, tetapi kami akhirnya menemukan cara kerjanya, dan menilai kekuatan. Saat ini, semakin banyak pengembang antarmuka menyingkirkan elemen mengambang yang mendukung elemen-elemen yang tegang, asalkan mungkin.

Saya percaya bahwa keuntungan utama dari elemen-elemen saringan adalah bahwa kita tidak perlu mengurus pembersihan fluks dan ketidaknyamanan lain yang dapat memicu elemen mengambang. Pada dasarnya, dengan mendefinisikan elemen, sebagai blok lurus, kita mengubahnya menjadi semacam hybrid: semi-line dan semi-blok. Elemen-elemen seperti itu dapat diubah dalam ukuran, mereka mungkin memiliki indentasi eksternal, tetapi lebar aslinya tergantung pada konten, sedangkan elemen blok secara default mengambil seluruh lebar induk. Artinya, mereka dibangun pada satu sama lain secara horizontal, seperti simbol dalam string, dan tidak secara vertikal seperti blok.

Di sini Anda akan berkata: "Dan apa mungkin ada masalah dengan mereka?". Masalahnya adalah bahwa mereka setengah baris, dan, seperti garis, mereka terpisah satu sama lain dengan sedikit interval sama dengan lebar simbol kosong. Untuk font standar 16px, dimensi jarak ini adalah 4px. Dalam kebanyakan kasus, jarak ini adalah 25% dari ukuran font. Bagaimanapun, itu mengganggu ketika Anda mencoba membangun elemen. Mari kita asumsikan bahwa kita memiliki elemen induk di lebar 600px dengan tiga elemen putri-blok lebar 200px. Jika Anda tidak menyingkirkan ruang empat piksel ini, kami memperoleh bahwa lebar elemen yang dihasilkan akan lebih besar dari lebar elemen induk (200 * 3 + 4 * 2 \u003d 608).

Untungnya, ada beberapa cara untuk menghilangkan interval yang tidak diinginkan ini, masing-masing dengan kelebihan dan kekurangannya. Sejujurnya, saya akan mengatakan bahwa tidak ada solusi ideal. Mari kita lihat cara-cara ini, satu per satu!

Menggunakan markup: Kami menghapus celah

Perhatikan markup ini - saya menggambarkannya dalam beberapa baris sebelumnya.

Seperti yang saya katakan sebelumnya, ketiga blok ini tidak akan masuk ke dalam satu baris, karena ada satu atau lebih tanda ruang antara blok (dalam kasus kami - simbol terjemahan string dan dua spasi). Cara pertama menyiratkan penghapusan spasi sederhana antara elemen:

Metode ini berfungsi, tetapi sangat memperburuk keterbacaan kode. Mungkin kita dapat mengubah tag kita alih-alih membangunnya dalam satu baris, kode akan menjadi lebih mudah dibaca:

Opsi lain yang tidak biasa:

Ya, pendekatan ini berfungsi! Tetapi secara umum, saya tidak akan merekomendasikan hal ini untuk digunakan, karena itu tidak intuitif. Terlepas dari kenyataan bahwa kami berhasil menyingkirkan ruang yang tidak diinginkan antara unsur-unsur, sebagai imbalannya kami menerima kode yang agak tidak menyenangkan. Mari kita coba sesuatu yang lain.

Menandai: Berdasarkan interval

Dan bagaimana jika mengomentari kesenjangan alih-alih menyingkirkan mereka?

Wow! Ini jauh lebih baik! Kode tetap dapat dibaca, dan secara umum semuanya terlihat baik-baik saja. Bahkan jika terlihat aneh pada pandangan pertama, mungkin pendekatan ini akan bermanfaat bagi Anda. Secara pribadi, saya menggunakan pendekatan ini ketika saya perlu menghapus ruang antara elemen blok selat.

Namun, beberapa akan mengatakan bahwa ini bukan cara yang sempurna, karena solusi ini membutuhkan kontrol dari markup, dan masalah positioning adalah bisnis CSS dan hanya CSS. Dan mereka akan benar-benar benar. Ini mengarahkan kita ke solusi basis data CSS.

CSS: ruang manipulasi antar karakter. Properti spasi surat

Properti letter-spacing. Digunakan untuk mengatur lebar ruang antar karakter. Gagasan cara kita adalah membuat ruang antara karakter kurang dari lebar ruang, dan untuk elemen anak mengarahkannya ke bentuk aslinya:

Induk (surat-spacsi: -0.3em;). Menyusui (spasi surat: normal;)

Teknik ini digunakan dalam wajan - mesin grid yang dikembangkan oleh Nicolas Gallagher, sehingga kita dapat mempertimbangkan opsi ini cukup dapat diandalkan. Namun, saya tidak terlalu menyukai apa yang kita andalkan pada beberapa jenis angka ajaib. Selain itu, untuk beberapa font Anda harus menetapkan nilai di bawah -0.3em - misalnya, -0.31em atau -0.32em. Anda harus beradaptasi dengan setiap kasus tertentu.

CSS: Indentasi eksternal negatif

Cara lain yang mirip dengan yang sebelumnya adalah penggunaan pensiun negatif. Metode ini memberikan kegagalan dalam IE 6/7, karena mereka tidak ramah dengan retret negatif. Selain itu, Anda perlu menghapus indentasi negatif pada elemen anak pertama sehingga tidak bergerak ke kiri, dan bahwa elemen anak sepenuhnya naik ke dalam wadah:

Anak (margin-left: -0.25em;). Menyusui: tipe pertama (margin-kiri: 0;)

Jika Anda tidak perlu mendukung IE 6/7, atau jika Anda memiliki file gaya terpisah untuk browser ini - saya pikir itu solusi yang cukup bagus dan aman.

CSS: Ukuran font

Dan yang terakhir, tetapi jauh dari cara terburuk adalah Anda dapat mencoba mengatur ukuran font elemen induk dalam 0 sehingga karakter kosong juga menjadi lebar nol, dan kemudian mengembalikan ukuran font untuk elemen anak.

Induk (ukuran font: 0;). Menyusui (ukuran font: 16px;)

Metode ini berfungsi dengan baik, tetapi ia juga memiliki kelemahannya:

• anda tidak dapat mengembalikan ukuran font menggunakan nilai relatif. em.Karena ukuran font elemen induknya adalah 0px
• ruang tidak dihapus di browser Android standar ke Jelly Bean
• jika Anda berubah dalam konteks @ font-face, font mungkin tidak dihaluskan di Safari 5
• beberapa browser tidak diizinkan font nol tinggi, misalnya, Chinese Chrome memamerkan font sedemikian rupa dengan 12px standar

Jadi ini jelas bukan solusi terbaik. Seperti yang sudah berbicara sebelumnya, saya akan berhenti menggunakan metode dengan komentar.

Kami membongkar posisi absolut

Posisi adalah hal yang cukup sulit. Banyak pendatang baru terjebak pada saat itu jika perlu untuk memisahkan elemen pada halaman. Dan mereka biasanya menggunakan buruk, atau sebaliknya - pelecehan - properti posisi. Properti ini menentukan bagaimana elemen akan digeser relatif terhadap beberapa sisi ( puncak., baik, bawah dan kiri.). Dibutuhkan empat nilai:

• statis. - Nilai default, perpindahan tidak berfungsi
• relatif. - Lapisan visual digeser, tetapi bukan elemen itu sendiri
• mutlak. - Elemen ini bergeser dalam konteks di sekitarnya (nenek moyang non-statis pertama)
• tetap - Elemen diposisikan di area tampilan, tidak masalah apa posisinya di dom

Biasanya masalah terjadi saat digunakan posisi: Mutlak.. Anda mungkin telah mengalami serupa: Tentukan elemen dengan posisi absolut, karena Anda ingin itu cacat relatif terhadap sudut kanan atas elemen induk (misalnya, sebagai tombol penutupan kecil dari jendela model, atau sesuatu yang serupa)

Elemen (posisi: absolut; atas: 0; kiri: 0;)

... dan ditampilkan di sudut kanan atas jendela. Dan Anda berpikir: "Apa ara?". Bahkan, ini adalah perilaku browser yang telah ditentukan. Kata kunci di sini - konteks.

Kode di atas sebenarnya berarti: " saya ingin elemen saya ditempatkan di sudut kanan atas relatif terhadap konteksnya". Jadi apa yang " konteks”? Ini adalah leluhur non-statis pertama.. Ini bisa menjadi elemen induk langsung. Atau elemen induk induk. Atau induk induk dari orang tua ... dan akan menjadi pencarian ke elemen pertama, yang posisinya tidak ditentukan sebagai statis..

Mungkin agak sulit untuk dipahami, terutama untuk pemula, tetapi jika Anda pernah belajar ini - Anda dapat secara fleksibel mengendalikan posisi absolut.

Ini adalah contoh sederhana yang menunjukkan apa yang baru saja kita bicarakan. Dua elemen induk, masing-masing di dalam elemen anak, yang diusulkan oleh nilai-nilai yang benar-benar tOP: 0. dan kanan: 0.. Di sebelah kiri, elemen induk diposisikan relatif (perilaku yang diharapkan). Elemen induk kanan dibiarkan statis (salah).

Kapan menggunakan tinggi / lebar 100%?

Tinggi 100%

Pertama mari kita usahakan dengan contoh yang kurang kompleks. Kapan harus digunakan tinggi: 100%? Bahkan, banyak dari kita setidaknya pernah bertanya-tanya dengan pertanyaan tentang "apa-apaan itu? Saya berharap bahwa halaman saya setidaknya akan menempati seluruh ketinggian layar! " Aku benar?

Untuk menjawab pertanyaan ini, Anda perlu memahami apa yang sebenarnya berarti properti. tinggi: 100%: Tinggi penuh elemen induk. Itu tidak berarti "semua ketinggian layar." Jadi jika Anda ingin wadah Anda menempati seluruh ketinggian layar, tinggi: 100% Tidak cukup.

Mengapa? Karena elemen induk dari wadah Anda ( tubuh.) Memiliki ketinggian default mOBIL.Apa artinya ukurannya ditentukan oleh konten. Sehingga Anda dapat mencoba untuk menempatkan tinggi: 100% Dan untuk elemen tubuh. - Itu masih tidak akan memberikan efek yang diinginkan.

Mengapa? Karena tag elemen induk tubuh. (html.) Memiliki ketinggian default mOBIL.Apa artinya ukurannya tergantung pada konten. Dan bagaimana jika Anda mencoba untuk meminta elemen hTML Tinggi: 100%? Bekerja!

Mengapa? Bahkan, karena elemen akar ( html.) - Ini bukan blok induk terbaru pada halaman - ada juga jendela viewport. Sederhananya - ini adalah jendela browser. Jadi jika Anda bertanya tinggi: 100% Elemen html.Anda akan membuatnya setinggi sama dengan ketinggian browser. Itu hanya saja.

Hasil dari sejarah kita tercermin dalam kode berikut:

Html, tubuh, .container (tinggi: 100%;)

Dan bagaimana jika elemen induknya ditetapkan min-tinggi, tetapi tidak ditanyakan ketinggian?

Roger Johansson baru-baru ini mengungkapkan masalah dengan tinggi: 100% Dalam kasus ketika elemen induk tidak memiliki ketinggian yang ditunjuk, tetapi tinggi minimum diatur untuk itu. Saya tidak akan mempelajari deskripsi, tetapi sebagai hasilnya, keputusannya adalah bahwa elemen induk perlu menetapkan ketinggian 1px, sehingga elemen anak dapat meregangkannya min-tinggi.

Orangtua (min-tinggi: 300px; tinggi: 1px; / * Kami dibutuhkan agar elemen anak terungkap untuk seluruh ketinggian min-tinggi * /) .CHILD (tinggi: 100%;)

100% lebar

Sekarang mari kita berurusan dengan parameter lebar: 100%. Segera ingatkan Anda bahwa, seperti dengan tinggi, pengaturan lebar: 100% - Ini merupakan indikasi bahwa elemen harus memiliki lebar yang sama dengan elemen induk. Tidak ada kejutan di sini.

Dan sekarang saya akan berbagi sedikit rahasia. Lebarnya bukan nama yang benar untuk properti ini. Properti lebar. Bahkan, tidak mendefinisikan seluruh lebar elemen, tetapi hanya lebar isinya, yang sama sekali berbeda dari lebar penuh elemen.

Jika kita menambahkan bidang dalam dan perbatasan ke elemen Anda yang dipamerkan oleh lebar lebar: 100%Elemen ini tidak akan cocok dengan orang tua - itu akan melampaui batasnya. Semua ini disebabkan oleh bidang dan perbatasan. Dan itulah alasannya lebar. Ini akan disebut lebar konten (lebar konten). Silakan pertimbangkan contoh berikut untuk memahami apa yang saya maksud:

Lebar elemen induk sama dengan 25EM.. Lebar elemen anak adalah 100% sama dengan 100% (dari elemen induknya), tetapi juga memiliki bidang 1em (1em kiri, 1em benar. Singkatnya secara horizontal akan 2EM), serta perbatasan di 0,5EM (Hanya 1EM secara horizontal), yang mengarah pada fakta bahwa lebar elemen anak akan memuji 25EM (100%) + 2EM + 1EM. Hmm ... Houston tampaknya memiliki masalah.

Ada empat cara untuk memperbaiki keadaan. Pertama, dan pasti yang terbaik - hindari instalasi lebar: 100%, terutama jika tidak ada gunanya dalam hal ini, seperti dalam kasus ini. Elemen anak adalah elemen blok yang secara otomatis memperluasnya ke lebar elemen induk (tanpa masalah yang kita lihat di atas). Sayangnya, jika kita berurusan dengan elemen strain-blok, Anda dapat menggunakan perbaikan berikut.

Tidak bisa digunakan lebar: 100%, dan atur lebar spesifik untuk elemen sendiri. Dalam kasus kami, itu adalah 20 - (2 + 1) \u003d 22EM. Harus dikatakan bahwa solusi ini buruk, karena perlu untuk menghitung lebar elemen yang diinginkan secara manual. Membayar dengan cara lain!

Opsi ketiga akan digunakan calc ()Untuk mengotomatiskan perhitungan: lebar: Calc (100% - 3em). Semua hal yang sama. Pertama, kita perlu menghitung jumlah bidang horizontal + batas vertikal. Kedua, calc () Ini tidak didukung paling baik di browser (itu tidak mendukung IE 8, Safari 5, Opera 12 dan browser Android standar).

Opsi keempat - gunakan properti ukuran kotak: Border-Box. Pada dasarnya, itu mengubah perilaku model wadah sehingga properti lebar mencerminkan lebar total elemen, batas dan bidang dimasukkan. Berita baiknya adalah bahwa dukungan untuk browser properti ini cukup bagus (semuanya kecuali IE 7 dan Opera 9).

Bagaimana tidak membuat kesalahan dengan Z-Index?

Semua item pada halaman diposisikan dalam ruang tiga dimensi: selain posisi vertikal dan horizontal, elemen-elemen juga terletak di sepanjang sumbu Z. Pada pandangan pertama, konsep ini tampaknya cukup sederhana: elemen dengan indeks Z yang lebih tinggi adalah ditampilkan di atas elemen dengan indeks Z bawah.

Sayangnya, semuanya bisa lebih rumit daripada kelihatannya. Saya umumnya yakin bahwa ini adalah properti CSS yang paling membingungkan. Saya yakin bahwa masalah dengan Z-Index adalah yang paling umum dan menjengkelkan, dengan siapa Anda hanya dapat bertemu saat bekerja dengan CSS. Tetapi kami akan mencoba mencari solusi.

Mari kita mulai dari awal: properti Z-Index tidak berfungsi dengan elemen statis. Untuk memindahkan elemen sepanjang sumbu Z, Anda perlu menentukan posisi untuk item sebagai relatif., mutlak. atau tetap. Jadi hal pertama yang harus kita lakukan adalah memastikan bahwa item diposisikan dengan benar sebelum Anda berpikir untuk menunjuknya Z-Index.

Sekarang, Anda harus ingat bahwa elemen-elemen di dom tidak terletak di lapisan yang sama. Ini berarti bahwa pameran Z-Index dalam nilai yang sangat penting mungkin tidak cukup untuk menampilkannya pada elemen lain. Itu disebut konteks overlay.

Dengan mengubah posisi di sepanjang sumbu Z, elemen-elemen dapat ditumpangi satu sama lain dalam urutan yang diinginkan. Begini caranya, menurut CSS, spesifikasi menampilkan elemen dalam satu konteks grup:

1. latar belakang dan perbatasan elemen yang membentuk konteks grup
2. konteks kelompok anak dengan level negatif (yang pertama adalah yang terkecil)
3. dalam streaming, non-line, non-pendekatan
4. elemen mengambang yang tidak bergaul
5. keturunan dalam streaming, line, tidak berupprovision, termasuk tabel dan sebagian besar blok huruf kecil
6. konteks kelompok anak dengan level 0 dan keturunan socotis dengan level 0
7. konteks kelompok anak dengan level positif (dari kurang ke lebih)

Ketika hasilnya mengerikan

Yah, itu adalah informasi paling mendasar tentang properti z-index. Pengetahuan tentang ini dapat menghemat banyak waktu, dan mengurangi jumlah masalah, pastikan. Sayangnya, ini tidak cukup. Ini masih bunga!

Faktanya adalah bahwa setiap konteks kelompok memiliki skala sendiri sepanjang sumbu Z. Pada dasarnya, elemen A dalam konteks grup 1 dan elemen B dalam konteks grup 2 tidak dapat berinteraksi dengan z-index. Ini berarti bahwa elemen A adalah bagian dari konteks grup yang berada di bagian paling bawah dari kelompok pengelompokan, dan tidak ada kemungkinan untuk menyimpulkannya di depan elemen B, yang dalam konteks kelompok lain, yang lebih tinggi Pemesanan grup, bahkan jika Anda mengaturnya sangat tinggi z -index.

Tapi tunggu - pada kenyataannya, itu masih lebih buruk. Elemen html. Bentuk konteks grup root. Dalam hal ini, setiap blok lokal (non-statis) dengan nilai z-index lebih besar dari mOBIL. Menciptakan konteks grup baru. Tidak ada yang baru dalam hal ini. Dan di sini semuanya menjadi cukup sedih: beberapa properti CSS yang sama sekali tidak terkait dengan posisi membuat konteks grup baru. Contohnya, kegelapan.

Ya, ya - properti kegelapan Menciptakan konteks grup baru. Properti juga berlaku mengubah dan perspevtive.. Tapi itu tidak masuk akal, bukan? Ini berarti bahwa jika Anda memiliki elemen dengan transparansi, berbeda dari 1, atau dengan transformasi selain tidak ada - Anda memiliki masalah potensial.

Sayangnya, setiap masalah dengan Z-Index unik, sehingga tidak mungkin untuk menawarkan solusi universal untuk semua masalah dengan Z-Index. Pada akhirnya, Anda dapat menarik beberapa kesimpulan:

• selalu periksa apakah barang Anda diatur ke posisi sebelum mendaftar ke mereka Z-Index
• jangan gunakan Z-index dengan nilai besar, itu sama sekali tidak berarti. Dalam kebanyakan kasus, itu sudah cukup z-index: 10
• pastikan item yang ingin Anda ubah urutan tampilan milik satu konteks grup
• jika Anda masih belum menyelesaikan masalah, pastikan Anda tidak memiliki elemen yang ditransformasikan atau transparan di jalan

Apa persatuan indentasi?

Saya pikir ini adalah salah satu css "gangguan", yang menghabiskan sebagian besar waktu saya. Saya percaya bahwa Anda akan mengatakan bahwa itu sama anehnya dengan perilaku Z-Index. Singkatnya, persatuan indentasi adalah ketika indentasi atas dan bawah dari dua elemen bergabung menjadi yang terbesar dari kedua indentasi ini. Secara umum, lekukan vertikal antara dua blok dihitung sebagai berikut:

Rupanya, ini persis alasan mengapa semuanya bekerja persis seperti (sebagaimana didefinisikan dan dijelaskan dalam spesifikasi CSS). Jadilah itu sebagaimana mungkin, kadang-kadang kita tidak ingin indentasi vertikal bersatu. Untuk memahami cara memperbaikinya, pertimbangkan alasan untuk masalah seperti itu. Persatuan indentasi terjadi dalam tiga kasus berbeda:

Blok terkait.

Ketika dua blok yang berdekatan memiliki indentasi vertikal, mereka digabungkan menjadi indentasi terbesar dari deposit lebih rendah dari satu elemen dan retret teratas yang kedua. Ini dapat dicegah oleh beberapa jalur:

• jelas: Kiri; Float: kiri; Untuk blok yang berdekatan (kanan juga berfungsi)
• tampilan: blok inline Pada saudara kandung (juga memicu tabel inline)

Elemen orang tua dan elemen putri pertama / terakhir

Biasanya, indentasi parent top dan indentasi atas elemen anak pertama digabungkan menjadi indentasi terbesar. Demikian pula, indentasi rendah orangtua dan indentasi bagian bawah elemen anak terakhir digabungkan menjadi yang terbesar. Fenomena ini juga dikenal sebagai "Uni Ancastor". Ada beberapa solusi untuk memerangi perilaku seperti itu. Sebagian besar dari mereka terdiri dari menambahkan salah satu properti berikut ke elemen induk:

• overflow: Tersembunyi. (atau selain otomatis)
• padding: 1px. (atau nilai lain, lebih dari 0); Beberapa browser bahkan mendukung nilai-nilai subpiksel)
• perbatasan: 1px padat transparan (atau perbatasan apa pun)
• tampilan: blok inline (Tabel lowning juga berfungsi - tabel inline)
• float: kiri. (Benar juga cocok)

Contoh berikut menunjukkan perbaikan ini dalam tindakan:

Blok kosong.

Ketika blok kosong tidak memiliki batas atau bidang, atau tinggi - batas atas dan bawah digabungkan menjadi satu. Dalam hal ini, ini cocok untuk kasus pertama atau kedua, yang dijelaskan di atas - kombinasi batas dengan induk induk / yang berdekatan. Namun, elemen-elemen kosong juga, secara umum, ide yang buruk, jadi saya harap Anda tidak perlu sering berurusan dengan mereka.

HASIL

Wow, cukup banyak hal, bukan? Tapi, sayangnya, itu hanya bagian atas bug gunung es, peretasan dan gangguan. Saya hanya menggambarkan masalah yang paling sering bertemu dengan yang mungkin Anda temui saat bekerja dengan CSS, tetapi masih ada banyak hal serupa sebagai ketidakcocokan browser, kekacauan dalam produsen, spesifisitas pemilih, kaskade dan warisan, dan banyak lagi.

Bagaimanapun, saya berharap beberapa solusi akan memungkinkan Anda untuk menghemat waktu.

Kami mempresentasikan terjemahan artikel "Mengapa CSS grid lebih baik daripada bootstrap untuk membuat tata letak" dari per Harald Borgen, yang diterbitkan di situs web ru.hexlet.io.

CSS Grid adalah cara baru untuk membuat tata letak di Internet. Untuk pertama kalinya, sistem layer penuh tersedia langsung di browser, yang memberikan banyak keuntungan.

Keuntungan ini menjadi sangat ekspresif jika Anda membandingkan CSS Grid dengan kerangka bootstrap paling populer. Anda tidak hanya dapat membuat tata letak yang sebelumnya tidak mungkin tanpa Javascript, tetapi kode Anda akan menjadi lebih mudah untuk dipelihara dan dipahami.

Mari kita lihat tiga alasan utama mengapa saya pikir CSS grid lebih unggul daripada bootstrap.

Marking akan lebih mudah

Mengganti bootstrap pada grid CSS akan membuat HTML Cleaner. Meskipun ini bukan keuntungan paling penting, itu mungkin yang pertama yang akan Anda perhatikan.

Untuk kejelasan, saya membuat tata letak situs web fiktif sehingga Anda dapat membandingkan kode yang diperlukan untuk dua versi. Sini:

Bootstrap.

Pertama-tama mari kita pertimbangkan markup yang diperlukan untuk membuat situs ini di bootstrap.

Di sini saya ingin Anda memperhatikan apa:

1. Setiap baris harus dengan tag terpisah
   .
2. Untuk menunjuk tata letak, nama kelas (col-xs-2) harus digunakan.
3. Ketika template ini rumit, html juga.

Jika ini adalah situs adaptif, tag terlihat sebagai aturan yang lebih buruk:

Kotak CSS.

Sekarang mari kita lihat cara untuk mengimplementasikan yang sama di grid CSS. Ini html:

Saya bisa menggunakan elemen semantik, tetapi memutuskan untuk mematuhi div sehingga perbandingan dengan bootstrap terlihat lebih jelas.

Anda dapat segera melihat bahwa markup ini lebih mudah. Nama kelas jelek dan tag div tambahan untuk setiap baris - di masa lalu. Ini hanya komputer untuk grid dan posisi di dalamnya.

Dan tidak seperti bootstrap, markup ini tidak akan terlalu rumit dengan meningkatnya kompleksitas tata letak halaman.

Dalam contoh dengan bootstrap, Anda tidak perlu menambahkan CSS, di grid CSS, tentu saja ada kebutuhan. Jika secara spesifik Anda perlu menambahkannya:

Untuk beberapa, itu mungkin merupakan argumen yang mendukung bootstrap: Anda tidak perlu khawatir tentang CSS untuk membuat grid sederhana - Anda hanya membangun tata letak di HTML.

Tetapi, seperti yang Anda pahami dari item berikutnya, koneksi antara markup dan tata letak sebenarnya merupakan kerentanan, jika kita berbicara tentang fleksibilitas.

Lebih banyak fleksibilitas

Misalkan Anda ingin mengubah tata letak tergantung pada ukuran layar. Misalnya, angkat menu ke baris teratas untuk dilihat dari perangkat seluler.

Dengan kata lain - ubah tata letak dengan ini:

hal ini:

Kotak CSS.

Lakukan dengan css grid sangat sederhana. Kami menambahkan permintaan media dan mencampur blok yang berbeda seperti yang kami inginkan:

Kemampuan untuk membuat tata letak dengan cara ini - tanpa khawatir tentang bagaimana HTML ditulis disebut independensi dari pesanan dalam kode (independensi pesanan sumber), dan ini adalah kemenangan raksasa bagi pengembang dan desainer.

CSS Grid memungkinkan Anda untuk mengubah HTML menjadi apa yang seharusnya. Dalam tata letak konten, bukan visualitas, yang ditujukan untuk CSS.

Bootstrap.

Jika kami ingin melakukan hal yang sama di bootstrap, kita perlu mengubah HTML. Kami perlu menaikkan tag menu ke baris atas, selain header, karena menu di hostage baris kedua.

Buat ini dengan kehadiran permintaan media bukanlah tugas sepele. Ini dapat diperiksa hanya dengan HTML dan CSS, dan Anda harus main-main dengan JavaScript.

Contoh ini menunjukkan keuntungan besar dari CSS Grid, yang saya alami.

Tidak ada lagi batasan 12 speaker

Ini bukan masalah terbesar, tetapi dia mengeluarkan banyak dari diri mereka sendiri. Karena bootstrap grid dibagi menjadi 12 kolom, Anda akan memiliki masalah jika Anda ingin tata letak lima. Atau tujuh. Atau sembilan. Atau dari angka yang bukan dua belas.

Dengan kisi CSS, semuanya salah. Anda dapat membuat tata letak Anda sendiri dari begitu banyak kolom dari berapa banyak yang diinginkan. Berikut ini tata letak tujuh kolom.

Ini dilakukan dengan mengatur nilai pengulangan (7, 1fr) untuk kolom templat-grid, seperti ini:

Mungkin ada cara hack untuk membuat yang serupa di bootstrap ... dan saya tahu bahwa bootstrap 4 menggunakan Flexbox, yang memungkinkan fleksibilitas seperti itu, tetapi masih tidak akan keluar dari beta.

Sebelum menyelesaikan artikel ini, secara alami, Anda perlu berbicara tentang dukungan browser. Pada saat penulisan artikel ini, 75% dari lalu lintas web global mendukung Grid CSS.

Tetapi sebelum Anda sepenuhnya menolak pemikiran menggunakan CSS Grid, saya menyarankan Anda untuk mendengarkan apa yang dikatakan Morten Rand-Hendrixen tentang hal itu. Dia mengklaim bahwa CSS Grid adalah kemampuan untuk memikirkan kembali bagaimana kita menyajikan kompatibilitas mundur:

"CSS Grid adalah modul markup, memungkinkan kami untuk mengubah penandaan dokumen tanpa mengganggu pesanan kode sumber. Dengan kata lain, CSS Grid adalah alat visual yang benar-benar, dan jika digunakan dengan benar, itu tidak akan mempengaruhi koneksi internal konten dalam dokumen. Dari sini, itu harus sederhana, tetapi fakta yang luar biasa: kurangnya dukungan grid CSS di browser lama tidak boleh mempengaruhi persepsi pengunjung situs, itu harus mengubah persepsi ini. "

Dengan kata lain, segera setelah Anda memisahkan konten dari visualitas, semua pengunjung akan melihat isinya, tetapi CSS Grid akan menonton yang terbaik untuk mereka yang memiliki dukungan dengan tanda yang lebih baik.

Kesimpulan

"Semakin saya menggunakan grid CSS, semakin yakin bahwa tidak ada keuntungan dalam menambahkan lapisan abstraksi di atasnya. CSS Grid adalah kerangka penandaan, dijahit langsung ke browser. "