css pelayar yang berbeza

Prestasi dan penyelesaian CSS dalam penyemak imbas yang berbeza

CSS ialah bahagian yang amat diperlukan dalam reka bentuk web. Ia boleh membawa peningkatan visual dan pengalaman interaktif ke halaman web. Walau bagaimanapun, disebabkan kernel berbeza pelayar yang berbeza, prestasi CSS dalam pelayar yang berbeza juga berbeza, yang membawa cabaran hebat kepada pereka web. Artikel ini akan membincangkan prestasi dan penyelesaian CSS dalam pelayar yang berbeza.

I. Prestasi CSS dalam pelayar yang berbeza

1. Perbezaan dalam model kotak

Dalam CSS, model kotak adalah salah satu konsep yang paling asas. Model kotak boleh dibahagikan kepada model kotak W3C dan model kotak IE. Persamaan antara dua model kotak ialah ia terdiri daripada empat bahagian: kandungan, padding, sempadan dan margin Perbezaannya terletak pada cara mereka mengira model kotak.

Model kotak W3C ialah model kotak standard Ia mengira lebar dan tinggi sebagai lebar dan tinggi kawasan kandungan, dan padding serta sempadan ditambah sebagai tambahan kepada lebar dan tinggi. Model kotak IE mengira lebar dan tinggi sebagai jumlah kawasan kandungan, padding dan sempadan.

Dengan cara ini, kod CSS yang sama mungkin menghasilkan hasil yang berbeza di bawah penghuraian penyemak imbas yang berbeza. Contohnya:

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid #000;
}

Dalam model kotak W3C, lebar elemen ini ialah 200px, ketinggian ialah 200px, padding, iaitu jumlah padding kiri dan kanan serta padding atas dan bawah ialah 40px, dan sempadan ialah 1px, jadi keseluruhan elemen mempunyai lebar 242px dan ketinggian 242px. Dalam model kotak IE, elemen ini mempunyai lebar 200px, ketinggian 200px, padding 40px dan sempadan 1px, jadi keseluruhan elemen mempunyai lebar 282px dan ketinggian 282px.

2. Keserasian gaya

Bukan semua sifat dan gaya CSS disokong pada semua penyemak imbas. Sebagai contoh, beberapa sifat CSS3 yang baru ditambah tidak berfungsi pada versi lama pelayar IE. Ini mungkin menyebabkan halaman web tidak dipaparkan dengan betul pada sesetengah penyemak imbas tanpa ujian merentas pelayar.

Contohnya:

.box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

Pada penyemak imbas yang menyokong atribut jejari sempadan, elemen ini akan dipaparkan sebagai bulatan, manakala pada penyemak imbas yang tidak menyokong atribut ini, elemen itu akan tetap Sebuah persegi.

3. Paparan teks

Penyemak imbas yang berbeza juga boleh membuat teks secara berbeza. Sesetengah penyemak imbas akan menjadikan fon tebal, sesetengahnya akan memampatkan fon, dan sesetengahnya akan meregangkan fon.

Contohnya:

p {
  font-weight: bold;
}

Fon juga boleh dipaparkan secara berbeza dalam penyemak imbas yang berbeza. Dalam sesetengah penyemak imbas, elemen ini mungkin kelihatan tebal, dan dalam sesetengah penyemak imbas, berat fon mungkin berubah sedikit, menyebabkan kesan yang tidak konsisten.

II Penyelesaian kepada CSS dalam penyemak imbas yang berbeza

1 Gunakan tetapan semula gaya penyemak imbas

Tetapan semula gaya penyemak imbas merujuk kepada penggunaan CSS untuk menukar semua gaya CSS lalai seperti fon, baris. ketinggian, jidar, dsb. ditetapkan semula kepada nilai yang sama untuk mencapai kesan yang sama dalam semua penyemak imbas.

Sebagai contoh, berikut ialah kod tetapan semula gaya penyemak imbas dalam normalize.css:

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
header,
nav,
section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

figcaption,
figure,
main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

Selepas menetapkan semula gaya lalai penyemak imbas, dan kemudian menetapkan gaya tersuai, anda boleh mencapai tujuan yang berbeza memaparkan kesan yang sama dalam penyemak imbas.

2. Gunakan prapenyusun CSS

Prapenyusun CSS boleh memudahkan proses menulis CSS, dan pada masa yang sama, ia boleh menyediakan beberapa fungsi lanjutan seperti pelengkapan automatik penyemak imbas, pembolehubah, dan fungsi, supaya kod CSS lebih mudah diselenggara dan boleh dibaca.

Prakompil CSS biasa termasuk LESS, SASS dan Stylus. Contohnya, apabila menulis kod CSS menggunakan SASS, anda boleh menggunakan arahan @import untuk menggabungkan berbilang fail CSS ke dalam satu fail, supaya hanya satu permintaan HTTP perlu dihantar semasa memuatkan fail ini dalam penyemak imbas, sekali gus meningkatkan kelajuan pemuatan halaman.

3. Gunakan awalan penyemak imbas dengan sewajarnya

Untuk mencapai kesan CSS terkini, kami perlu menggunakan beberapa sifat CSS terkini, tetapi sifat ini mungkin tidak disokong oleh semua penyemak imbas, jadi Penggunaan awalan penyemak imbas yang sesuai diperlukan. Awalan penyemak imbas merujuk kepada menambah beberapa awalan penyemak imbas sendiri sebelum sifat CSS, supaya penyemak imbas boleh mencapai kesan uniknya sendiri pada sifat CSS tertentu.

Contohnya:

.box {
  -webkit-box-shadow: 0px 0px 4px 4px #000;
  -moz-box-shadow: 0px 0px 4px 4px #000;
  box-shadow: 0px 0px 4px 4px #000;
}

Dalam contoh ini, -webkit-box-shadow, -moz-box-shadow dan box-shadow adalah semua sifat yang sama, hanya dengan penyemakan imbas yang berbeza Awalan penyemak imbas membenarkan pelayar yang berbeza mempunyai cara mereka sendiri untuk menghuraikan dan memaparkan atribut ini.

Ringkasan

Prestasi CSS yang tidak konsisten dalam penyemak imbas yang berbeza membawa cabaran hebat kepada pereka web. Walau bagaimanapun, dengan menggunakan tetapan semula gaya penyemak imbas, precompiler CSS dan penggunaan awalan penyemak imbas yang sesuai, kami boleh menyelesaikan masalah ini dengan lebih baik, untuk mencapai kesan halaman web yang sama yang dipaparkan dalam penyemak imbas yang berbeza.

Atas ialah kandungan terperinci css pelayar yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!