Resetați setările originale CSS
Pentru a realiza un mic stabil, unii dezvoltatori vor reseta toate câmpurile și liniuțe utilizând selectorul universal:
Prin definirea padding listă și începe cu care stylesheet ei, vei obține ceea ce vă așteptați. Cu toate acestea, utilizarea * înseamnă că câmpul și adâncitura implicit „prăbușit“ pentru toate elementele și, de îndată ce ați adăugat un element Forma, a devenit foarte dificil.
El se resetează unele dintre proprietățile multora (dar nu toate) elementele cu echivalentul text simplu. Deoarece numai elementele de resetare corespunzătoare de cost, astfel, unele probleme *. Apoi, putem defini un stil pentru aceste proprietăți aruncate „obesstilennyh“, fiind siguri că vom construi pe o bază stabilă de browser. Astfel de stiluri de o programare, în plus, acționează ca un comutator trebuie să delibereze instalarea de stiluri potrivite pentru aceste elemente.
PROBLEME fabrica de resetare CSS
deversări CSS au fost un avantaj, dar acum, mai ales în cazul în care cota de cadre carcasele, acestea sunt adesea folosite „ca atare“. De exemplu, Eric presupus că alți dezvoltatori va construi site-uri de pe stilurile oferite de o reseta în mod corespunzător le anulează, iar Meyer Reset prima versiune a activa temporar această regulă:
Din păcate, în realitate, nu toate stilurile definite de focalizare, iar cea de a doua versiune a lui Eric șters.
deversări Aplicarea, te simți un pic de un pervers. Implicite stiluri de resetare browser-ul face să se gândească la modul în care trebuie să se afișeze fiecare element, ajutând pentru a se asigura că elementele utilizate în semantică, în loc de stiluri implicite. Dar elemente, cum ar fi i și le au aproape întotdeauna stilul browser-ul implicit. Alte stiluri de browser implicit, cum ar fi fosta suma o dată ridicol de mare de text antet, schimbare și a devenit destul de suportabilă în mod implicit. Problemele apar atunci când cineva vrea să se aplice după transmiterea elementului HTML fac obiectul unui dumping numai cu desemnat „obesstilennymi“ reset stiluri.
Pentru mine, cea mai importantă problemă este moștenirea deversări, ceea ce duce la spam în instrumentele bazate pe browser. Când încercați să urmăriți problema CSS altcuiva cod sunt elemente profund imbricate nu ajuta:
resetare CSS tinde să se repete din cauza moștenire
NORMALIZE.CSS
Nikolas Gallaher (Nicolas Gallagher) și Dzhonatan Nil (Jonathan Neal) au luat o abordare diferită folosind Normalize.css. „Un fișier CSS mic, oferă cea mai bună coerența cross-browser-ul în elementele de stil implicit HTML». Așa cum este cazul cu resetare CSS, ne oferă un punct de plecare solid de compatibilitate cross-browser - în primul rând cauza principala de aplicare a reliefului - dar cele două abordări sunt diferite din punct de vedere filozofic.
elementul „Obesstilenny“ al unei liste neordonate
Aplică Meyer Reset
Aplicare Normalize.css v1
Aplicarea Normalize.css v2
arată în mod clar diferența în filozofie, ca un exemplu de Meyer Reset apare ca o pereche de linii de text simplu, fără margini, umplutură, sau markeri, în timp ce exemplele Normalize.css ca stilurile implicite. Diferența în stilurile aplicate UL, prea ușor de observat.
Cu toate acestea, acest lucru nu este toate stilurile aplicate UL. Pentru comparație, aici e același „obesstilenny“ captura de ecran, dar cu stiluri vizibile agent utilizator pentru a Firefox 21 și Opera Următor 15:
Stiluri Mozilla agent utilizator
Stiluri Opera User Agent
Aceasta este CSS, pe care resetată sau normaliza.
Normalize.css versiunea 2 suporta browsere moderne, plus IE 8, în timp ce versiunea 1, în plus, oferă un sprijin suplimentar pentru browsere mai vechi, cum ar fi IE 6 și 7. Aceste browsere mai vechi au nevoie de mai mult de normalizare, iar aici sunt afecta deficiențe minore - de exemplu, adăugarea verticală câmp pentru o listă dincazul exemplul de mai sus, captura de ecran Normalize.css v1. Separarea în două versiuni este utilă în cazul în care nu mai este necesar să se prevadă un nivel mai ridicat de sprijin pentru browsere mai vechi, iar dacă vrei să știi totul despre starea lor de spirit.
Normalize.css, de asemenea, ajută la corectarea unele defecte browser-ul, inclusiv un „setări de afișare elemente HTML5, edita font-size, SVG preformatat textului supraplin în IE9 și multe defecte de forme în browsere și sisteme de operare.“ De exemplu, următorul WebKit CSS rezolvă o problemă cu noul element HTML5 tip de intrare = »căutare»:
Fără ea, utilizarea implicit WebKit'om -webkit-aspect: searchfield; fortype = »căutare» împiedică desemnarea de stiluri de font, indentare, frontiere, și proprietăți de fundal în OS X și, iOS, determină comportamentul buggy proprietate de frontieră în Windows.
CONCLUZIE
Foarte diferit din punct de vedere al filozofiei de CSS astfel de deversări ca Meyer Reset, Normalize.css urmează în mare măsură aceeași tradiție, mergând pe urmele Tanteka și Eric. Poate că sunt deja utilizați - face parte din HTML5 de bază șabloane. Bootstrap noul Yui Pure.
Toate tabelele de stiluri agent utilizator tind una și, sperăm, o zi nu vom avea mai mult de a face resetarea sau normalizare. Există chiar și un argument rezonabil pentru a opri îngrijorătoare despre diferențele mici între browsere. Între timp, dacă utilizați o resetare CSS sau nu folosește nimic în următorul său proiect, o șansă de a lăsa Normalize.css.
APLICAȚII
1. Este de remarcat faptul că stilurile de masă agent utilizator pentru Mozilla. WebKit și IE. CSS2.1 implicit stylesheet agent utilizator aduce în față diferența dintre planul de browsere (vechi). Aceste stiluri includ, de asemenea lucruri, cum ar fi stilul - încercați să adăugați în stilul CSS și a vedea ce se întâmplă.
2. De atunci, toate browserele au ajuns la liniuță de instalare lista de padding-start din stânga-padding și, în timp ce IE7 - cel mai recent browser-ul IE, care solicită această marjă de stânga.
Postscript. Având în vedere că „bang“ a câmpului, și capitonarea tuturor elementelor cu un * foarte dificil, există o resetare selector universal pe baza cărora trebuie amintit: *. Se schimbă cadrul și padding, care devin o parte din lățimea unui element, și nu în plus față de aceasta. Pentru a afla mai multe despre acest lucru, consultați articolul de Paul Irish (Paul Irish) box-dimensionare: de frontieră-box - toate lacrima! .
Revizie: Echipa webformyself.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram