Šodienas interneta pārlūks ir tālu no trakajām dienām, kad jebkāda veida pārrobežu pārlūku konsekvence bija labvēlīga domāšana. Šodienas tīmekļa pārlūkprogrammas ir ļoti atbilstošas standartiem. Viņi labi darbojas kopā un nodrošina diezgan konsekventu lapu rādīšanu dažādās pārlūkprogrammās. Tas ietver jaunākās Google Chrome versijas, Microsoft Edge, Mozilla Firefox, Opera, Safari un dažādas pārlūkprogrammas, kas atrastas neskaitāmajās mobilajās ierīcēs, kuras tiek izmantotas, lai šodien piekļūtu vietnei.
Kaut gan progress ir panākts, kad runa ir par tīmekļa pārlūkprogrammām un kā tie parāda CSS, joprojām pastāv pretrunas starp šīm dažādajām programmatūras iespējām. Viena no kopīgākajām pretrunām ir tas, kā šie pārlūkprogrammas pēc noklusējuma aprēķina rezerves, polsterējumu un robežas.
Šo kastītes modeļa aspektu dēļ visi HTML elementi tiek izmantoti, un tāpēc, ka tie ir būtiski, veidojot lapas izkārtojumu, neatbilstošs displejs nozīmē, ka viena lapa var izskatīties lieliski vienā pārlūkprogrammā, bet nedaudz izskatu citā. Lai apkarotu šo problēmu, daudzi tīmekļa dizaineri normalizē šos kastes modeļa aspektus. Šī prakse ir pazīstama arī kā "nulles iestatīšana" vērtībām, kas attiecas uz starpību, polsterējumu un robežām.
Piezīme par pārlūkprogrammas noklusējuma iestatījumiem
Visiem interneta pārlūkiem ir noklusējuma iestatījumi konkrētiem lapas attēlojuma aspektiem. Piemēram, hipersaites ir zilas un pasvītrotas pēc noklusējuma. Tas ir konsekvents dažādās pārlūkprogrammās, un lai gan tas ir kaut kas, ko lielākā daļa dizaineru mainās, lai tie atbilstu viņu konkrētā projekta vajadzībām, tas, ka tie visi sākas ar tiem pašiem noklusējumiem, atvieglo šo izmaiņu veikšanu. Diemžēl noklusējuma vērtība margiņām, polsterēšanai un robežām nav tāda paša līmeņa pārrobežu pārlūku konsekvences.
Normalizing vērtības margins un padding
Labākais veids, kā atrisināt problēmu, kas saistīta ar pretrunīgu lodziņu modeli, ir visu elementu vērtību un HTML papildinājumu vērtību nulles iestatīšana. Pastāv vairāki veidi, kā jūs to varētu izdarīt, lai pievienotu šo CSS noteikumu savai stilu lapai:
* {margin: 0; polsterējums: 0; }Šis CSS noteikums izmanto * vai aizstājējzīmi. Šis raksturs nozīmē "visi elementi", un tas būtībā atlasītu katru HTML elementu un iestatītu maržas un polsterējumu uz 0. Lai gan šis noteikums ir ļoti nespecifisks, jo tas ir jūsu ārējā stilu tabulā, tam būs augstāka specifika nekā noklusējuma pārlūks vērtības dara. Tā kā šie noklusējumi ir tādi, ko jūs pārrakstāties, šis viens stils paveic jūsu uzdevumu.
Vēl viena iespēja ir piemērot šīs vērtības HTML un ķermeņa elementiem. Tā kā visi citi jūsu lapas elementi būs šo divu elementu bērni, CSS kaskādei šie rādītāji jāpiemēro visiem šiem citiem elementiem.
html, body {margin: 0; polsterējums: 0; }Tas sāks savu dizainu vienā un tajā pašā vietā visās pārlūkprogrammās, taču jāatceras, ka pēc tam, kad visas maliņas un polsteri tiek izslēgti, jums atsevišķi jāpārvērš tās atsevišķās vietnes daļās, lai iegūtu izskatu un jūt, ka jūsu dizains prasa.
Robežas
Jūs domājat, "taču pārlūkprogrammām pēc noklusējuma nav robežas ap ķermeņa elementu". Tas nav stingri taisnība. Internet Explorer vecākajām versijām ir caurspīdīga vai neredzama robeža elementu vidū. Ja jūs nenosakāt robežu līdz 0, šī robeža var izjaukt jūsu lapas izkārtojumu. Ja esat nolēmis turpināt atbalstīt šīs novecojušās IE versijas, jums būs jārisina šis jautājums, pievienojot savam ķermenim un HTML stili:
HTML, ķermenis {
starpība: 0px;
polsterējums: 0 pikseļi;
robeža: 0px;
}
Līdzīgi kā jūs izslēdzat maliņas un polsterējumu, šis jaunais stils izslēgs arī noklusējuma robežas. Varat arī izdarīt to pašu, izmantojot raksta agrāk parādīto aizstājējzīmju selektoru.
Jennifera Krīnina oriģinālais raksts. Rediģējis Džeremijs Girards, kas notiks no 9/27/16.