Hal ini terjadi karena browser sudah memiliki gaya sendiri untuk elemen yang diterapkan secara default pada halaman yang dibuka di dalamnya. Dan faktanya adalah di browser yang berbeda, aturan ini sedikit berbeda, dari satu browser ke browser lainnya. Sekitar 10 tahun yang lalu, perbedaan-perbedaan ini sangat mendasar dan sangat mencolok. Sekarang jumlahnya minimal, tapi masih ada.

Untuk menghilangkan perbedaan ini, dan membuat tampilan halaman sama secara default di semua browser, gunakan file .css khusus: reset.css atau normalize.css

reset.css - apa fungsinya dan bagaimana menggunakannya

File reset.css muncul pertama kali. File css ini berisi enumerasi semua kemungkinan tag html, dan menyetel ulang nilainya ke nol. Artinya, ini menghapus semua kemungkinan indentasi, membuat font sama di semua tag, mengatur ulang semua gaya teks. Jadi semua judul dan paragraf ditampilkan dalam teks biasa, berukuran sama dan tanpa indentasi. Hasilnya, kami mendapatkan pengaturan ulang gaya default di semua browser.

Cara kerjanya seperti ini, pertama di halaman kita menyertakan file reset.css, dan setelah itu file kita dengan gaya. Hasilnya, pertama-tama kita mengatur ulang semua gaya, dan baru kemudian di style.css kita mengatur desain tag html. Dengan cara ini, kami mencapai bahwa semua browser akan mengatur ulang gaya defaultnya, dan semua markup akan didasarkan pada gaya yang kami atur di style.css.

Unduh reset.css

Anda dapat mengunduh reset.css dari cssreset.com

Atau Anda dapat mengunduh versinya "Reset CSS" 2.0 Eric Meyer pada tombol di bawah, dari blog saya:

normalize.css - cara kerjanya dan apa bedanya

Setelah reset.css terhubung pada halaman, semua style harus ditulis kembali. Dan setiap kali kegiatan ini melelahkan. Oleh karena itu, reset digantikan oleh alat lain - normalisasi. Normailze - sesuai dengan namanya, ini tidak mengatur ulang semua gaya, tetapi menormalkannya, menjadikannya satu tampilan di semua browser. Setelah penerapannya, gaya dasar untuk menampilkan judul, ukuran font, indentasi... disatukan dan ditampilkan di semua browser dengan cara yang sama. Dengan menggunakannya, Anda dapat menghemat sejumlah waktu, yang jika terjadi penyetelan ulang akan dihabiskan untuk menentukan gaya penyetelan ulang.

Jika Anda belum menggunakan normalize.css, maka saya sarankan untuk mencobanya di proyek Anda berikutnya, dan siapa tahu Anda mungkin tidak bisa menolaknya lagi 😉

Unduh normalisasi.css

Anda dapat mengunduh normalize.css dari necolas.github.io/normalize.css

Atau unduh dari blog saya:

Mana yang lebih baik direset atau dinormalisasi?

Tidak ada jawaban tunggal.

Yang pertama mengatur ulang semua gaya, yang kedua mengarah ke penyebut yang sama. Desainer tata letak berpengalaman yang menggunakan reset.css biasanya memiliki kumpulan gayanya sendiri yang langsung disertakan setelah reset untuk menata gaya konten. Dan mereka tidak harus mendefinisikan ulang gaya untuk elemen dasar setiap kali dalam tata letak baru. Begitu juga aku. Saya merasa nyaman dan tahu gaya apa yang saya tetapkan secara default dan cara kerjanya.

normalisasi berguna jika Anda mempelajari strukturnya, Anda dapat memodifikasinya sendiri dengan menyesuaikan tampilan dasar tag. Dan bekerja dengannya juga akan nyaman saat streaming - saat Anda harus sering berbaikan.

Setiap alatnya bagus, yang penting gunakan dengan benar 😉

Saat menata situs web, situasi sering muncul ketika tidak mungkin untuk menulis sekumpulan properti css yang dapat dipahami dengan baik oleh semua browser utama. Dan jika masalah ini paling sering tidak terjadi pada browser Firefox, Google Chrome, Opera dan Safari, maka dalam kasus versi Internet Explorer yang berbeda, sangat sulit untuk mencapai tata letak lintas browser. Oleh karena itu, untuk mengatasi masalah ini, Anda perlu menulis bagian dari properti css khusus untuk beberapa versi IE (paling sering adalah IE6 dan IE7). Ada dua cara untuk melakukan ini: yang pertama menggunakan komentar bersyarat Internet Explorer (Komentar bersyarat), yang kedua menggunakan peretasan css (misalnya, *margin-left:10px atau _margin-left:10px). Kedua metode tersebut memiliki sejumlah kelemahan, namun untungnya ada solusi lain yang menurut saya paling optimal untuk membuat file css lintas browser.

Pertama, lebih detail tentang kekurangan dari dua metode pertama. Jika menggunakan komentar bersyarat, kami memuat file css terpisah dengan gaya tambahan untuk versi Internet Explorer yang berbeda. Misalnya seperti ini:

Kerugian dari metode ini adalah sebagai berikut:

• kami menerima permintaan http tambahan untuk memuat file dengan gaya untuk berbagai versi Internet Explorer, yang akan berdampak negatif pada waktu buka halaman;
• gaya dipecah menjadi beberapa file yang berbeda, sehingga sangat sulit untuk menemukannya saat mengerjakan tata letak situs (saya sendiri sangat sering bekerja dengan proyek seperti itu di mana file css terpisah untuk ie7 adalah hal yang biasa, dan menghabiskan banyak waktu untuk memahami di mana sih, gaya ini atau itu untuk IE dimuat).

Selain itu, saya menganggap kelemahan kedua sangat signifikan. Dan dalam hal ini, bahkan menggunakan peretasan css untuk IE tampaknya merupakan cara yang lebih baik untuk mencapai tata letak lintas-browser. Namun peretasan css juga memiliki kelemahan - situs yang menggunakannya tidak akan lolos validasi. Jika validasi halaman web tidak penting, maka peretasan dapat digunakan, tetapi ada solusi yang lebih elegan daripada dua solusi pertama, yang tidak memiliki kelemahan seperti dijelaskan di atas. Dengannya, Anda dapat menulis semua gaya dalam satu file, yang akan berhasil lolos validasi. Metode ini dijelaskan di situs Paul Irish. Esensinya terletak pada kenyataan bahwa dengan bantuan komentar bersyarat kami tidak memuat file css tambahan, tetapi cukup menetapkan kelas khusus untuk tag , mirip dengan cara perpustakaan Modernizr js mengekspos kelas.

Kode untuk tag pembuka , sehingga akan terlihat seperti ini:

Omong-omong, di blog saya, metode tata letak lintas-browser khusus ini digunakan sehingga di browser IE6 dan IE7 halaman situs ditampilkan dengan cara yang sama seperti di browser lain.

Halo para pembaca yang budiman!

Kita semua ingin gaya kita ditampilkan dengan benar di browser yang berbeda. Tapi apa pun yang dikatakan orang, Anda harus menambahkan gaya agar berfungsi di browser lain. Proses ini disebut membawa tata letak situs ke tampilan lintas browser. Kompatibilitas lintas-browser adalah ketika gaya css ditampilkan dengan benar di browser yang berbeda dan versinya yang berbeda.

Saya ingin memberikan beberapa tips untuk proses membawa Anda css untuk kompatibilitas lintas browser memakan waktu lebih sedikit.

1. Fokus pada browser paling populer. Peringkat browser dapat ditemukan di web. Perlu juga mempertimbangkan wilayah audiens situs tersebut. Misalnya, jika ini adalah situs untuk pemirsa dari Afrika, maka bukan Chrome, tetapi browser lain yang sudah mendominasi di sini. Selain itu, selama proses tata letak, ada baiknya melihat tampilan situs di browser yang menempati posisi ke-2 dan ke-3.

2. Anda dapat mencari yang paling populer gaya css, yang tidak terlihat bagus di browser lain. Temukan peretasan CSS untuk mereka.

3. Ada alat khusus di internet untuk menghasilkan gaya lintas browser. Saya ingin menyoroti 2 yang paling menarik menurut saya.

Alat untuk CSS lintas browser.

• Banyak gaya telah dijelaskan;
• Ada contoh penggunaan beserta hasilnya.

• Sulit untuk menavigasi situs pada awalnya;
• Tidak mungkin menghasilkan gaya dengan parameternya sendiri (contoh penggunaan diberikan).

Pembuat CSS3

• Nyaman dan intuitif untuk dioperasikan;
• Anda dapat menghasilkan gaya untuk parameter Anda;
• Anda dapat melihat hasil dari gaya yang dihasilkan.

• Beberapa gaya

Kami telah merilis buku baru, "Pemasaran Konten Media Sosial: Cara memikat pelanggan dan membuat mereka jatuh cinta dengan merek Anda."

Kompatibilitas lintas-browser - kemampuan sumber daya web untuk beradaptasi dengan beberapa browser dan menampilkannya dengan benar di dalamnya.

Lebih banyak video di saluran kami - pelajari pemasaran internet dengan SEMANTICA

Misalnya Anda telah membuat website untuk toko online Anda. Anda telah mengembangkan desain indah yang enak dipandang. Namun pengguna mengakses situs Anda melalui browser yang berbeda. Bahkan ada yang menggunakan smartphone. Dan jika Anda belum memeriksa kompatibilitas sumber daya lintas-browser, mungkin saja situs tersebut tidak ditampilkan dengan baik di beberapa browser.

Elemen mungkin berpindah, gambar mungkin tidak ditampilkan, font menjadi jelek. Seseorang tidak akan menggunakan layanan seperti itu. Dia akan mencari lebih jauh.

Tugas pengembang situs adalah memastikan, apa pun browser dan perangkatnya, sumber daya ditampilkan dengan benar.

Tata letak lintas browser

Ada persaingan antar browser. Di masa lalu, semua orang mencoba menambahkan fitur dan opsi luar biasa. Akibatnya, standar HTML tidak lagi dipatuhi, dan setiap browser menampilkan halaman secara berbeda.

Netscape Navigator keluar dari perlombaan, menyerahkan monopoli Internet Explorer. Hampir bersamaan, proyek Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) dan Safari (WebKit) mulai mendapatkan momentum, membagi pasar di antara mereka sendiri dan memaksa komunitas untuk memikirkan masalah kompatibilitas lintas-browser. dari situs mereka.

Dari penulis: orang menggunakan browser yang berbeda untuk menjelajahi web. Tentu saja ada yang paling populer, seperti Chrome. Ada juga yang jarang digunakan (Safari, Internet Explorer), tetapi jika Anda membuat situs untuk orang-orang, Anda harus tahu tentang kompatibilitas lintas-browser - cara membuatnya dan apa maksudnya. Mari kita lihat cara mencapai tampilan situs yang sama di semua browser utama.

Tujuan utama kompatibilitas lintas-browser adalah untuk mencegah perubahan signifikan pada desain situs di browser web yang berbeda. Jika perbedaannya hanya pada detailnya dan ini tidak mempengaruhi persepsi situs secara keseluruhan, maka kami dapat mengatakan bahwa Anda telah mengatasi masalah kompatibilitas lintas-browser. Tapi tetap saja, nasihat nyata apa yang bisa diberikan mengenai hal ini?

Cara mencapai kompatibilitas lintas browser

Saat ini, ada 5 browser terpopuler yang perlu Anda optimalkan situsnya. Dan jika biasanya mudah untuk berteman dengan browser web versi terbaru, maka semakin lama versinya, semakin banyak masalah yang mungkin timbul.

Misalnya, IE6 adalah salah satu browser yang paling bermasalah dalam hal mendukung tag html baru dan properti css. Namun, beberapa saat ini masih memerlukan tampilan normal situs di browser ini. Bagi saya, ini sudah keterlaluan. Dukungan IE8 sudah cukup.

Namun, ini merupakan penyimpangan kecil. Sekarang mari kita lihat langkah-langkah nyata yang akan membantu membuat situs ini kompatibel lintas-browser.

Manfaatkan solusi yang sudah jadi. Jika Anda ingin mengimplementasikan fitur-fitur baru dan mengajari browser lama untuk memahaminya, Anda memerlukan perpustakaan javascript. Tanpa mereka, dalam hal ini, tidak ada tempat. Anda harus menginstal jQuery.

Ada perpustakaan javascript yang luar biasa bernama Modernizr. Kemampuannya memungkinkan Anda menerapkan alternatif untuk properti yang tidak didukung. Itulah yang saya sarankan Anda gunakan.

Jadi, pertama-tama Anda harus mengunjungi situs resminya. https://modernizr.com/download. Di sini Anda perlu mencentang teknologi yang ingin Anda gunakan di situs Anda. Saya harus mengatakan bahwa daftarnya cukup panjang dan tanpa pengetahuan rata-rata tentang standar web modern dan bahasa Inggris, Anda tidak akan dapat memahaminya. Bagaimanapun, ada juga sifat intuitif. Kalaupun semuanya dicentang, kode yang dihasilkan tidak akan terlalu merepotkan.

Beras. 1. Pilihan teknologi yang akan diperiksa perpustakaan.

Memeriksa Perpustakaan

Setelah mengunduh perpustakaan versi khusus, Anda perlu memeriksa pengoperasiannya. Itu harus dihubungkan menggunakan tag skrip, yang menentukan jalur ke file. Jika semuanya benar, maka tag html seharusnya memiliki banyak kelas gaya baru. Kelas-kelas ini diberi nama berdasarkan teknologi yang Anda centang.

>p?Oleh karena itu, jika kelas tersebut ditentukan dalam tag html, maka teknologi tersebut berfungsi di browser ini. Jika ada sesuatu yang tidak didukung, maka kelas “nama tanpa teknologi” akan didaftarkan. Saya akan memberi Anda sebuah contoh sekarang:

Misalnya, Anda perlu mencentang properti box-shadow. Sebagai referensi, ini menetapkan bayangan pada elemen. Jika browser mendukungnya, maka kelas gaya ini akan muncul di tag html. Jika browser web tidak mengenali properti tersebut, kelas "no-boxshadow" akan muncul.

Beras. 2. Di tag html Anda akan melihat banyak kelas. Dalam hal ini, kami melihat bahwa browser mendukung hampir semua teknologi.

Kini pengelolaan kompatibilitas lintas browser sepenuhnya ada di tangan Anda. Cukup dengan menyetel beberapa properti alternatif ke kelas no-boxshadow, dan di semua browser yang tidak mendukung properti box-shadow, aturan ini akan diterapkan. Sangat nyaman.

Di habrahabr, saya menemukan contoh lain yang ingin saya berikan kepada Anda di sini. Ada contoh bagaimana perpustakaan dapat digunakan untuk mengimplementasikan alternatif di browser lama.

Pemilih multiplebgs ( gambar latar: url("image.png") tengah 40px tanpa pengulangan, url("image2.png"); ) .pemilih tidak ada-multiplebg ( gambar latar: url("image.png") tengah 40px abu-abu muda tanpa pengulangan; )

Contoh penjelasan. Kami tertarik dengan teknologi berbagai latar belakang, yang telah lama didukung di CSS3. Untuk melakukan ini, cukup mencantumkan alamat gambar dan parameternya dipisahkan dengan koma. Tentu saja, browser lama tidak mendukung ini, jadi kami menulis gaya kami sendiri untuk browser tersebut menggunakan kelas .no-multiplebgs. Ini menentukan bahwa gaya berlaku jika browser tidak mendukung banyak latar belakang.

Dengan demikian, ia dapat mengatur gaya lain untuk pemilih ini dan dengan demikian mendapatkan tampilan situs yang indah di browser web mana pun. Tentu saja, untuk merasakan sepenuhnya kemungkinan Modernizr, Anda sendiri harus menguasai pemrograman web dan tata letak situs web. Orang yang berpengalaman akan dapat menentukan properti apa yang dapat menggantikan properti yang kurang didukung.

Tentu saja fungsi perpustakaan jauh lebih luas. Anda dapat menguji dukungan untuk berbagai teknologi dan peristiwa berantai hingga hasilnya di akhir. Contoh.