Tämän päivän selain on tullut kaukana hulluista päivistä, jolloin kaikenlainen selaimen selaimen sävy oli toiveajattelua. Tämän päivän web-selaimet ovat kaikki hyvin vaatimusten mukaisia. He pelaavat mukavasti yhdessä ja antavat melko yhdenmukaisen sivunäytön eri selaimissa. Tämä sisältää uusimmat Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari ja useat selaimet, jotka löytyvät moniin mobiililaitteisiin, joita käytetään verkkosivuston käyttämiseen.
Vaikka web-selaimilla on varmasti edistysaskeleet ja miten ne näyttävät CSS: ltä, näiden eri ohjelmistovaihtoehtojen välillä on edelleen epäjohdonmukaisuuksia. Yksi yleisimmistä epäjohdonmukaisuuksista on, miten nämä selaimet laskevat marginaalit, pehmuste ja rajat oletuksena.
Koska laatumallin nämä näkökohdat vaikuttavat kaikkiin HTML-elementteihin, ja koska ne ovat välttämättömiä sivuasettelujen luomisessa, epäyhtenäinen näyttö tarkoittaa, että sivu voi näyttää hyvältä yhdellä selaimella, mutta näyttää hieman pois toisessa. Tämän ongelman torjumiseksi monet web-suunnittelijat normalisoivat laatumallin nämä näkökohdat. Tätä käytäntöä kutsutaan myös "nollaamalla" marginaalien, pehmusteiden ja rajojen arvoja.
Huomautus selaimen oletusasetuksista
Kaikilla verkkoselaimilla on oletusasetukset tietyille sivun näyttämiskohteille. Esimerkiksi hyperlinkit ovat sinisiä ja alleviivattu oletuksena. Tämä on johdonmukainen eri selaimissa, ja vaikka se on jotain, jonka suunnittelijat muuttavat tietyn hankkeen suunnittelutarpeiden mukaisesti, se, että kaikki alkavat samoilla oletusarvoilla, tekee näiden muutosten helpottamiseksi. Valitettavasti marginaalien, pehmusteiden ja rajojen oletusarvo ei ole yhtä taso kuin selaimesi sählysisällisyys.
Marginaalit ja pehmusteiden normalisointi
Paras tapa ratkaista epäyhtenäisen laatumallin ongelma on asettaa kaikki HTML-elementtien marginaalit ja täyttöarvot nollaksi. Voit lisätä tämän CSS-säännön tyylitiedostoon muutamia tapoja.
* {marginaali: 0; pehmuste: 0; }Tämä CSS-sääntö käyttää * tai jokerimerkkiä. Tämä merkki tarkoittaa "kaikkia elementtejä", ja se valitsee periaatteessa jokaisen HTML-elementin ja asettaa marginaalit ja pehmusteeksi 0. Vaikka tämä sääntö on hyvin epäspesifinen, koska se on ulkoisessa tyylisivustossasi, sillä on suurempi spesifisyys kuin oletusselain arvot tekevät. Koska oletusasetukset ovat sellaisia, jotka olet kirjoittanut, tämä tyyli täyttää sen, mitä olet tekemässä.
Toinen vaihtoehto on soveltaa näitä arvoja HTML- ja kehon elementteihin. Koska kaikki muut sivusi elementit ovat näiden kahden elementin lapsia, CSS-kaskadin pitäisi soveltaa näitä arvoja kaikkiin muihin elementteihin.
html, body {marginaali: 0; pehmuste: 0; }Tämä käynnistää suunnittelusi samassa paikassa kaikissa selaimissa, mutta yksi asia, johon on muistettava, on, kun käännetään kaikki marginaalit ja pehmuste pois, sinun on valittava ne selektiivisesti tietyille verkkosivujen osiin saadakseen ulkoasu ja tuntuu, että suunnittelusi vaatii.
Reunukset
Saatat ajatella, mutta selaimilla ei ole rajaa kehon elementin ympärillä oletuksena. " Tämä ei ole totta. Internet Explorerin vanhemmissa versioissa on läpinäkyvä tai näkymätön elementtiraja. Ellei rajaa asetettu arvoon 0, raja voi häiritä sivusi ulkoasua. Jos olet päättänyt jatkaa näiden vanhentuneiden IE-versioiden tukemista, sinun on ratkaistava tämä lisäämällä keholle ja HTML-tyypeille seuraavat:
HTML, runko {
marginaali: 0px;
pehmuste: 0px;
raja: 0px;
}
Samanlainen kuin poistat marginaalit ja pehmusteiden käytöstä, tämä uusi tyyli sammuttaa myös oletusrajat. Voit myös tehdä saman sisällön käyttämällä artikkelissa aiemmin esitettyä wildcard-valitsinta.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 27.9.16.