Toate elementele HTML ale paginilor au semnificații specifice. Și, din păcate, ele nu sunt interpretate la fel de diferite browsere. Ca urmare, designul site-ului are de suferit, designul acestuia se modifică la schimbarea browserului (navigare pe Internet). Scopul procedurii de eliminare a stilului este de a schimba inconvenientele browserului în chestiuni cum ar fi înălțimea rândurilor, marginile, dimensiunile fontului antetului etc.
Aplicații de scripturi pentru descărcarea stilurilor CSS
Cred că fiecare webmaster care se respectă este responsabil pentru scrierea propriului cod CSS. Dacă sunt un fan al unei abordări diferite, ia o decizie gata, aplică pentru ceva nou și răspunde nevoilor tale.
Eric Meyer CSS Resetare
Scenariul scris de Eric Meyer, în cuvintele autorului însuși, este incredibil de hidos. De exemplu, pentru elementul corp nu există sarcini, indiferent de culoarea cu care este decorat fundalul. Prin urmare, pot exista modificări, modificări, extinderi și alte ajustări în funcție de nevoile dvs. Adăugați culorile necesare pentru părțile laterale, vă rugăm.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licență: niciuna (domeniu public) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, address, mare, cita, cod, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, masă, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, antet, hgroup, meniu, navigare, ieșire, ruby, secțiune, rezumat, timp, marcaj, audio, video (margine: 0; umplutură: 0; chenar: 0; dimensiunea fontului: 100%; font: moștenire; aliniere verticală: linie de bază ) /* Resetarea rolului de afișare HTML5 pentru browsere mai vechi */ articol, deoparte, detalii, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1 ; ) ol, ul ( list-style: none; ) blockquote, q ( ghilimele: niciunul; ) blockquote:fore, blockquote:after, q:fore, q:after (conținut: ""; conținut: none; ) tabel (border- colaps: colaps; distanță-limită: 0; )
Yahoo! (YUI 3) Resetați CSS
Eliminarea stilului CSS al YUI 3 îmbunătățește stilul superb al elementelor HTML din browsere, precum și alte scripturi de descărcare CSS, pentru a crea o bază de încredere pentru crearea de site-uri web și site-uri web.
/* YUI 3.18.1 Copyright 2014 Yahoo! Inc. Toate drepturile rezervate. Licențiere sub licență BSD. http://yuilibrary.com/license/ */ /* TODO este necesar pentru a elimina setările pe HTML, deoarece nu putem să-l spațiu de nume background:#FFF ) /* TODO eliminăm setările pe BODY; nu se poate pune numele */ /* TODO test punerea unei clase pe HEAD - Eșuează pe FF */ body, dl, dt, ul, ol, li, h1, h2, h3, h4, h6. , pre, cod, formular, set de câmpuri, legendă, intrare, textarea, p, citat bloc, th, td ( margin:0; padding:0; ) tabel ( border-collapse:collapse; border-spacing:0; ) fieldset , img ( border:0; ) /* TODO Gândiți-vă la gestionarea moștenirii diferit, poate lăsând IE6 să eșueze puțin... */ adresa, legenda, citarea, codul, dfn, em, strong, th, var ( font-style: normal; font-weight:normal; ) ol, ul (list-style:none; ) legenda, th (text-align:left; ) h1, h2, h3, h4, h5, h6 (font-size:100%; font- weight:normal; ) q:before, q:after (conținut:""; ) abbr, acronim (border:0; font-variant:normal; ) /* pentru a păstra înălțimea liniei și aspectul selectorului */ sup ( vertical- align:text-top ) sub ( vertical-align:text-bottom; ) input, textarea , select ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*pentru a activa redimensionarea pentru IE*/ ) /*pentru că legenda nu " moștenește în IE * / legendă ( culoare:#000; ) /* ștampilă de detectare CSS YUI */ #yui3-css-stamp.cssreset ( afișare: niciunul; )
Drop styles normalize.css
Normalize.css este un fișier CSS personalizat care permite browserelor să afișeze toate elementele în mod mai consecvent și la standardele actuale. Autorii au monitorizat diferențele dintre stilurile diferitelor browsere pentru a determina care stiluri ar necesita normalizare.
/*! normalize.css v6.0.0 | Licență MIT | github.com/necolas/normalize.css */ /* Document ===================================== = ======================================= */ /** * 1. Corectează linia înălțime în toate browserele. * 2. Puteți ajusta imaginile de fundal după schimbările de orientare în IE pe Windows Phone și iOS. */ html ( înălțimea liniei: 1,15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Secțiuni ================================================= = ========================== */ /** * Adăugați afișarea corectă în IE 9-. */ articol, deoparte, subsol, antet, navigare, secțiune ( afișare: bloc; ) /** * Corectați dimensiunea fontului și marginea elementelor „h1” din contextele „secțiune” și * „articol” în Chrome, Firefox și Safari. */ h1 ( font-size: 2em; margine: 0.67em 0; ) /* Gruparea conținutului ============================ = ==================================================== ========= */ /** *Adăugați afișarea corectă în IE 9-. * 1. Adăugați afișajul corect în IE. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Adăugați marja corectă în IE 8. */ figure ( margin: 1em 40px; ) /** * 1. Adăugați caseta corectă dimensionarea în Firefox. * 2. Afișare overflow în Edge și IE. */ h ( box-sizing: content-box; /* 1 */ înălțime: 0; /* 1 */ overflow: vizibil; /* 2 */ ) /** * 1. Corectați moștenirea și scalarea dimensiunii fontului în toate browserele. * 2. Corectați dimensiunea ciudată a fontului `em` în toate browserele. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Semantică la nivel de text =============== ==================================================== === ========= */ /** * 1. Schimbați fundalul negru pe funcțiile IE 10 */ a ( culoare de fundal: transparent; /* 1 */ -webkit-text-decoration -skip: objects ; /* 2 */ ) /** * 1. Eliminați chenarul de jos în Chrome 57- și Firefox 39- . * 2. Adăugați textul de decor corect în Chrome, Edge, IE, Opera și Safari. */ abbr ( border-bottom: none; /* 1 */ text-decoration: subliniat; /* 2 */ text-decoration: subliniat punctat; /* 2 */ ) /** * Preveniți aplicarea duplicată a `bolder ` după următoarea regulă din Safari 6. */ b, puternic ( font-weight: inherit; ) /** * Adăugați greutatea corectă a fontului în Chrome, Edge și Safari. */ b, puternic ( font-weight: bolder; ) /** * 1. Corectați moștenirea și scalarea dimensiunii fontului în toate browserele. * 2. Corectați dimensiunea ciudată a fontului `em` în toate browserele. */ cod, kbd, samp (familie font: monospace, monospace; /* 1 */ dimensiune font: 1em; /* 2 */ ) /** * Adăugați stilul corect de font în Android 4. 3-. */ dfn ( font-style: italic; ) /** * Adăugați fundalul și culoarea corecte în IE 9-. */ marca (culoare de fundal: #ff0; culoare: #000; ) /** * Adăugați dimensiunea corectă a fontului în toate browserele. */ small ( font-size: 80%; ) /** * Preveniți înălțimea liniilor `sub` și `sup` în * toate browserele. */ sub, sup ( dimensiunea fontului: 75%; înălțimea liniei: 0; poziție: relativă; alinierea verticală: linia de bază; ) sub ( jos: -0.25em; ) sup ( sus: -0.5em; ) /* Conținut încorporat ================================================= ================ =========================== */ /** * Adăugați afișare corectă în IE 9-. */ audio, video ( display: inline-block; ) /** * Adăugați afișajul corect în iOS 4-7. */ audio:not() (afișare: niciunul; înălțime: 0; ) /** * Eliminați chenarul imaginilor din interiorul linkurilor în IE 10-. */ img (border-style: none; ) /** * Ascunde overflow-ul în IE. */ svg:not(:root) ( overflow: ascuns; ) /* Forms ================================ = =================================================== ====== */ /** * Eliminați marja în Firefox și Safari. */ buton, intrare, optgroup, select, textzona ( margine: 0; ) /** * Afișează overflow în IE. * 1. Afișați depășirea în Edge. */ buton, intrare ( /* 1 */ overflow: vizibil; ) /** * Eliminați moștenirea transformării textului în Edge, Firefox, IE. * 1. Eliminați moștenirea transformării textului în Firefox. Butonul */, selectați ( /* 1 */ text-transform: none; ) /** * 1. Preveniți o eroare WebKit în care (2) distruge controalele native `audio` și `video` * în Android 4. * 2. Vickory stilul de tipuri importante în iOS și Safari. */ buton, html , /* 1 */ , ( -webkit-appearance: buton; /* 2 */ ) /** * Eliminați chenarul interior și umplutura în Firefox. */ buton::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner /** * Salvează stilurile de focalizare nesetate de regula anterioară . */ buton:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring (contur: 1px ButtonText punctat; ) /** * 1. Vickory textul care este inserat în Edge și IE . * 2. Vickory barvisibilitatea elementelor „fieldset” în IE. * 3. Îndepărtați umplutura astfel încât dezvoltatorii să nu aibă nicio legătură cu aceasta, ceea ce înseamnă zero * elemente `fieldset` în toate browserele. */ legendă ( dimensiunea casetei: border-box; /* 1 */ culoare: moștenire; /* 2 */ afișare: tabel; /* 1 */ lățime maximă: 100%; /* 1 */ padding: 0 /* 3 */ white-space: normal /* 1 */ ) /** * 1. Adăugați afișarea corectă în IE 9-. * 2. Adăugați file verticale drepte în Chrome, Firefox și Opera. */ progres ( afișare: bloc inline; /* 1 */ aliniere verticală: linie de bază; /* 2 */ ) /** * Eliminați bara de defilare verticală implicită în IE. */ textarea ( overflow: auto; ) /** * 1. Adăugați dimensiunea corectă a casetei în IE 10-. * 2. Îndepărtați căptușeala în IE 10-. */ , ( dimensiunea casetei: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Lista Vickory de butoane de orientare și deblocare în Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( înălțime: automat; ) /** * 1. Corectați aspectul ciudat în Chrome și Safari. * 2. Corectați stilul conturului în Safari. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Eliminați butonul PIN și activați în Chrome și Safari pe macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Vikorizați stilul la tipurile pe care se poate face clic în iOS și Safari. * 2. Schimbați proprietățile fontului în „moștenire” în Safari. */ ::-webkit-file-upload-button ( -webkit-appearance: buton; /* 1 */ font: inherit; /* 2 */ ) /* Interactiv ============ ==================================================== === ============ */ /* * Adăugați afișarea corectă în IE 9-. * 1. Adăugați afișajul corect în Edge, IE și Firefox. */ detalii, /* 1 */ meniu ( display: block; ) /* * Adăugați afișarea corectă în toate browserele. */ rezumat (afișare: element-listă; ) /* Scripting ==================================== = ======================================= */ /** * Adăugați afișarea corectă în IE 9-. */ canvas ( display: inline-block; ) /** * Adăugați afișarea corectă în IE. */ șablon ( afișare: niciunul; ) /* Ascuns ======================================= ====================================== */ /** * Adăugați afișajul corect în IE 10 - . */ (afisare: nici unul; )
Aruncare prin selector universal * (stea)
La prima vedere, poate părea că cea mai simplă și mai simplă soluție este de a descrie toate elementele HTML și de a le atribui valori, dacă puteți folosi selectorul * și chiar extindeți HTML.
* ( marja: 0; umplutură: 0; )
Din păcate, nu este o practică bună. Este foarte important pentru browser (este nevoie de mult timp în comparație cu alte proceduri pentru eliminarea CSS) să pună regulile la baza fiecărui element din document, în special pe site-uri web mari și poate crea, de asemenea, o mulțime de stiluri bune. în spatele scenelor.
Drop stil WordPress
Dacă doriți să utilizați una dintre metodele descrise pentru eliminarea stilurilor CSS pentru un site WordPress, atunci o puteți face în două moduri.
Primul este că trebuie să copiați codul de descărcare în fișierul style.css al temelor dvs. WordPress (după rândurile despre autor, ele se numesc cele după textul încadrat de o fracțiune și o stea /* ... */) .
Există o mulțime de tipografi care concurează pentru astfel de ranguri Resetare CSS, serviciu pentru a înțelege particularitățile diferitelor browsere. De fapt, Acest fișier de stil renunță la toată puterea CSS dezvoltatorilor. În acest articol, voi demonstra codul acestui fișier și vă voi anunța, varto vikorystuvati CSS Reset chi ni.
Am multe diferite Resetare CSS, Toată duhoarea este aproximativ aceeași. Puteți scrie asta pe wiki:
Html, body, div, span, applet, obiect, iframe,
h1, h2, h3, h4, h5, h6, p, citat bloc, pre,
a, prescurtare, acronim, adresa, mare, cita, cod,
del, dfn, em, font, img, ins, kbd, q, s, samp,
mic, grevă, puternic, sub, sup, tt, var,
b, u, i, centru,
dl, dt, dd, ol, ul, li,
set de câmpuri, formular, etichetă, legendă,
masa, legenda, tbody, tfoot, thead, tr, th, td (
fundal: transparent;
chenar: 0;
dimensiunea fontului: 100%;
marja: 0;
contur: 0;
umplutură: 0;
vertical-align: linia de bază;
}
corp (
înălțimea liniei: 1;
}
ol, ul (
stil-listă: niciunul;
}
citatul bloc,q(
citate: niciuna;
}
blockquote:înainte, blockquote:după,
q:inainte, q:dupa (
continut: "";
continut: nici unul;
}
: Focus (
contur: 0;
}
masa (
border-colaps: colaps;
distanță-limită: 0;
}
Mă gândesc de ce vikoristanul lui este atât de chibzuit și atât de inteligent și de ce, de exemplu, nu sunt un vikorist, ca atât de mulți alți tipografi, despre această recunoaștere varto. În primul rând, asta este salut fisierul, într-un mod diferit, buna ora pentru obrobka, dar cel mai important lucru este că este mai puțin potrivit pentru cei cu icter. De exemplu, câmpurile tabelului în sine. Și toate autoritățile au stat în spatele gândirii cu un motiv, dar ca cea mai bună opțiune pentru prezentarea diferitelor elemente. Îți cânt, eliminând zero căptușeală la mijlocul tabelului, care arată totul, îl vei roti în fișierul principal. Și este departe de a fi un fapt că există o diferență semnificativă în ceea ce a fost în spatele gândirii. Iese axa pe care o retragem mai întâi și apoi o întoarcem. Și în același timp cu primele neajunsuri (un fișier interesant și un cod interesant) există o mulțime de machete și deloc vikory Resetare CSS.
În orice caz, Scăderea stilului vikoristan nu merită Prin urmare, puteți comenta acest lucru, deoarece respectați că adaptarea mai ușoară a site-ului la diferite browsere poate simplifica cu ușurință aspectul în ansamblu.
Este vina familiilor IE și Opera Mini.
Unele sisteme de asistență IE pot cauza o problemă, iată modalități de a elimina unele dintre controalele CSS ale valorilor lor principale:
Reset-this ( animație: niciuna; animație-întârziere: 0; animație-direcție: normal; animație-durata: 0; animation-fill-mode: niciunul; animation-iterate-count: 1; animation-name: none; animation- play-state: rulare, animație-timing-funcție: ușurință, backface-vizibilitate: fundal-clip: margine-imagine: fundal-poziție: 0; -y: 0; bord-stil auto: border-bottom: 0 border-bottom-stil:; border-collapse: margine-stânga-stil: border-left-radius: 0; border-right-style: niciunul; chenar-dreapta-latime: mediu; distanță-limită: 0; chenar-sus: 0; border-top-color: mostenire; raza-chenar-sus-stânga: 0; raza-chenar-sus-dreapta: 0; border-top-style: niciunul; chenar-sus-latime: mediu; jos: auto; caseta-umbra: niciuna; box-sizing: content-box; caption-side: sus; clar: niciunul; clip:auto; culoare: mostenire; coloane: auto; număr de coloane: auto; coloană-umplere: echilibru; coloane-decalaj: normal; regulă-coloană: mediu nici unul curentColor; coloană-regula-culoare: currentColor; coloană-regulă-stil: niciunul; lățime-coloană-regula: niciuna; coloana-span: 1; lățimea coloanei: auto; continut: normal; contra-increment: niciunul; contraresetare: niciuna; cursor: auto; direcție: ltr; afișaj: inline; celule goale: arată; plutire: nici unul; font: normal; font-family: mostenire; dimensiunea fontului: mediu; stil font: normal; font-variant: normal; greutate font: normal; inaltime: auto; cratime: niciuna; stânga: auto; spațiere între litere: normal; înălțimea liniei: normală; stil-listă: niciunul; list-style-image: niciuna; list-style-position: exterior; list-style-type: disc; marja: 0; margine-jos: 0; margine-stânga: 0; margine-dreapta: 0; margine-top: 0; înălțime maximă: niciuna; lățime maximă: niciuna; înălțime minimă: 0; lățime min: 0; opacitate: 1; orfani: 0; contur: 0; culoare-contur: inversat; stil de contur: niciunul; lățime contur: medie; preaplin: vizibil; overflow-x: vizibil; overflow-y: vizibil; umplutură: 0; căptușeală-partea inferioară: 0; umplutură-stânga: 0; umplutură-dreapta: 0; captuseala-top: 0; întrerupere de pagină după: auto; pagina-break-before: auto; pagina-break-inside: auto; perspectiva: niciuna; perspectiva-origine: 50%; 50%; poziție: static; /* Poate necesita ghilimele diferite pentru diferite locații (de ex. fr) */ ghilimele: "\201C" "\201D" "\2018" "\2019"; dreapta: auto; dimensiunea filelor: 8; table-layout: auto; text-align: moștenire; text-align-last: auto; text-decor: niciuna; text-decor-culoare: mostenesc; text-decor-line: niciuna; text-decor-stil: solid; text-indent: 0; text-shadow: niciunul; text-transform: niciuna; sus:auto; transforma: nici unul; stil de transformare: plat; tranziție: niciuna; tranziție-întârziere: 0s; tranziție-durată: 0s; proprietate de tranziție: niciuna; tranziție-funcție de sincronizare: ușurință; unicode-bidi: normal; vertical-align: linia de bază; vizibilitate: vizibil; spatiu alb: normal; văduve: 0; latime: auto; spațierea cuvintelor: normal; z-index: auto; /* patch modern de bază */ all: initial; toate: dezactivate; ) /* patch modern de bază */ #reset-this-root ( all: initial; * ( all: unset; ) )
- Repoziție github relevantă din 2017.
Acest lucru a fost declarat în comentariile lui Koristuvach @user566245:
Acest lucru este corect în principiu, dar kilometrajul individual poate varia. De exemplu, anumite elemente, cum ar fi zona de text din spatele pereților, creează un cordon, stagnare și modifică limitele zonei de text.
Pridbany pentru a deveni norma actuală, Koristuvach Joost
#resetare-acest-părinte ( all: initial; * ( all: unset; ) )
STOC Z W3
Acesta poate fi folosit pentru elementul „widget” rădăcină inclus în bara laterală dacă nu doriți să reduceți stilul barei laterale. Vă rugăm să rețineți, totuși, că orice stil „din culise” care este aplicat acestui element (de exemplu, de exemplu: afișare: bloc din tabelul de stil UA pe elementele blocului, de exemplu), va fi și el vizibil.
S-a gândit cineva la altceva, cum ar fi css pentru a scăpa de css? Asa de?
Iată un utilitar simplu:
getElementsByTagName ("*") va returna toate elementele din DOM. Apoi puteți seta stiluri pentru elementul skin din colecție:
Var allElements = document.getElementsByTagName("*"); pentru (var i = 0, len = allElements.length; i< len; i++) { var element = allElements[i]; // element.style.border = ... }
Toate acestea sunt spuse; Nu cred că renunțarea la CSS este cu adevărat posibilă, deoarece nu vom ajunge cu un singur browser web. Dacă la sfârșitul „browserului” acesta va fi instalat „în culise”.
Pentru claritate, iată o listă cu valorile Firefox 40.0 pentru
de font-style: lansare oblică a operațiunii DOM.Aliniere-conținut: nesetat; align-items: unset; align-self: unset; animație: nesetat; aspect: neasezat; spate-vizibilitate: neasezat; modul de amestecare de fundal: dezactivat; fundal: neasezat; legare: neasezat; dimensiune bloc: nesetat; border-block-end: unset; border-block-start: unset; border-colaps: neasezat; border-inline-end: unset; border-inline-start: unset; border-radius: neasezat; margine-spațiere: nesetat; chenar: neasezat; jos: neasezat; box-align: unset; cutie-decor-pauza: neasezat; direcția casetei: dezactivat; box-flex: dezactivat; caseta-ordinal-grup: nesetat; box-orient: unset; box-pack: dezinstalat; box-shadow: neasezat; dimensionare cutie: nesetat; caption-side: nesetat; clar: neasezat; clip-path: nesetat; clip-regula: dezactivat; clip: dezinstalat; reglaj de culoare: nesetat; filtre-interpolare-culori: nesetat; culoare-interpolare: nesetat; culoare: nesetat; umplere-coloană: nesetat; coloane-gap: nesetat; regulă-coloană: nesetat; coloane: nesetate; continut: nesetat; control-personaj-vizibilitate: nesetat; contra-increment: dezactivat; contraresetare: dezactivat; cursor: nesetat; afișaj: dezactivat; dominant-bază: nesetat; celule goale: nesetate; umplere-opacitate: nesetat; regulă de umplere: nesetat; umple: neasezat; filtru: dezactivat; flex-flow: nesetat; flex: dezinstalat; float-edge: neasezat; plutire: dezactivat; flood-color: neasezat; flood-opacity: nesetat; font-family: nesetat; font-feature-settings: unset; kerning font: nesetat; font-language-override: unset; font-size-adjust: unset; dimensiunea fontului: nesetat; font-stretch: dezactivat; font-style:oblic; font-sinteza: nesetat; font-variant: unset; font-weight: nesetat; font: ; pictograma-imagine-ruptă-fort: nesetat; inaltime: neasezat; cratime: nesetat; orientarea imaginii: nesetat; imagine-regiune: nesetat; redarea imaginii: nesetat; ime-mode: dezactivat; inline-size: nesetat; izolare: neasezat; justificare-conținut: nesetat; justify-items: unset; justify-self: neasezat; stânga: neasezat; spațiere între litere: nesetat; iluminare-culoare: nesetat; înălțimea liniei: nesetat; list-style: unset; margin-block-end: unset; margin-block-start: unset; margin-inline-end: unset; margin-inline-start: unset; margine: nesetat; marker-offset: nesetat; marker: nesetat; tip masca: nesetat; masca: neasezat; max-block-size: unset; înălțime maximă: nesetat; max-inline-size: nesetat; lățime maximă: nesetat; min-block-size: nesetat; inaltime min: neasezat; min-inline-size: nesetat; lățime min: nesetat; mod de amestecare: dezactivat; obiect-potrivire: neasezat; pozitie-obiect: neasezat; offset-block-end: unset; offset-block-start: dezactivat; offset-inline-end: unset; offset-inline-start: dezactivat; opacitate: nesetat; ordine: dezactivat; orienta: neasezat; outline-offset: nesetat; raza-contur: nesetat; contur: neasezat; preaplin: dezactivat; padding-block-end: unset; padding-block-start: dezactivat; padding-inline-end: unset; padding-inline-start: unset; captuseala: neasezat; întrerupere de pagină după: nesetat; pagina-break-before: unset; pagina-break-inside: nesetat; vopsea-comanda: nesetat; perspectiva-origine: neasezat; perspectiva: neasezat; pointer-evenimente: unset; poziție: dezactivat; ghilimele: nesetat; redimensionare: nesetat; dreapta: dezactivat; ruby-align: unset; rubin-poziție: neasezat; scroll-comportament: nesetat; scroll-snap-coordonate: dezactivat; scroll-snap-destination: dezactivat; scroll-snap-points-x: dezactivat; scroll-snap-points-y: dezactivat; scroll-snap-type: dezactivat; redarea formei: nesetat; stive-dimensionare: neasezat; stop-color: nesetat; stop-opacity: nesetat; stroke-dasharray: neasezat; stroke-dashoffset: unset; stroke-linecap: nesetat; stroke-linejoin: unset; stroke-miterlimit: nesetat; stroke-opacity: nesetat; lățimea cursei: nesetat; stroke: neasezat; tab-size: nesetat; table-layout: unset; text-align-last: unset; text-align: unset; text-ancora: dezactivat; text-combină-în verticală: dezactivat; text-decor: neasezat; text-accentuare-poziție: nesetat; text-accent: nesetat; text-indent: unset; orientare text: nesetat; text-overflow: dezactivat; redarea textului: nesetat; text-shadow: nesetat; text-size-adjust: unset; text-transform: nesetat; sus: dezinstalat; transform-origine: nesetat; transform-style: unset; transforma: dezactivat; tranziție: nesetat; focalizare pe utilizator: dezactivat; user-input: dezactivat; user-modify: unset; user-select: dezactivat; vector-efect: nesetat; vertical-align: unset; vizibilitate: neasezat; spatiu alb: nesetat; latime: neasezat; va-schimbare: unset; tragerea ferestrei: dezactivat; ruptura de cuvinte: neasezat; spațierea cuvintelor: nesetat; word-wrap: dezactivat; modul de scriere: dezactivat; z-index: nesetat;
Viziunea autorului: A trăi pe un sit din Merezhi este similar cu a trăi pe nisipurile dificile. Browserele funcționează în continuare la fel, dar uneori nu reușesc să afișeze acreditările netransferate. De exemplu, toate browserele au o „foaie de stil agent utilizator” - un set de stiluri CSS în acest scop, astfel încât antetul să arate ca un antet etc., chiar înainte de a atribui stiluri laterale1. Desigur, în motorul browserului de piele, un pic de masacru va fi implicat în procesul de curățare.
Una dintre aplicații a folosit foi de stil listă, în timp ce în foile de stil pentru browser Internet Explorer și Opera au folosit list margin-left: 30pt;, în timp ce Firefox și KHTML au folosit padding-left: 40px;. Dacă doriți să schimbați intrarea în ul (padding-left: 0;), aceasta a produs rezultate diferite în browsere.
SKID WEEKEND NALASHTUVAN CSS
Pentru a obține o stabilitate scăzută, ca dezvoltator, elimin toate câmpurile și folosesc selectorul universal suplimentar:
* (marja: 0; umplutură: 0;)
* ( marja : 0 ; umplutură : 0 ; )
Odată ce ați accesat lista și ați preluat foaia de stil din ea, le veți selecta pe cele pe care le-ați găsit. Cu toate acestea, stagnarea * a însemnat că câmpul și intrarea au „căzut” pentru toate elementele și, de îndată ce ați adăugat elementul de formular, a devenit și mai dificil.
Scopul resetarii este de a reseta tot ceea ce este posibil... [i] pentru a deveni punctul de plecare al stilurilor tale de bază puternice- Eric Meyer
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, masculin, grevă, puternic, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, tabel, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, fígcaption, subsol, antet, hgroup, meniu, navigare, ieșire, rubin, secțiune, rezumat, timp, marcaj, audio, video ( marjă: 0; umplutură: 0; chenar: 0; dimensiunea fontului: 100%; font: moștenire; aliniere verticală: linie de bază; )
html, body, div, span, applet, obiect, iframe,
h1, h2, h3, h4, h5, h6, p, citat bloc, pre,
a, prescurtare, acronim, adresa, mare, cita, cod,
del, dfn, em, img, ins, kbd, q, s, samp,
mic, grevă, puternic, sub, sup, tt, var,
b, u, i, centru,
dl, dt, dd, ol, ul, li,
set de câmpuri, formular, etichetă, legendă,
masa, legenda, tbody, tfoot, thead, tr, th, td,
articol, deoparte, pânză, detalii, încorporare,
figură, figcaption, subsol, antet, hgroup,
meniu, navigare, ieșire, ruby, secțiune, rezumat,
timp, marcaj, audio, video (
marja: 0;
umplutură: 0;
chenar: 0;
dimensiunea fontului: 100%;
font: mostenire;
vertical-align: linia de bază;
Este important să reduceți puterea multor (sau nu a tuturor) elementelor la un simplu echivalent cu textul. Fragmentele sunt aruncate din aceleași elemente, astfel se poate evita problema * (marja: 0; padding: 0;). Apoi putem defini stiluri pentru aceste autorități „invalide” eliminate, fiind siguri că vor fi pe o bază stabilă între browsere. Această recunoaștere a stilurilor servește și ca un indicator al cererii pentru stabilirea stilurilor similare pentru aceste elemente.
PROBLEME ALE SKIDANNYA NALASHTUVAN CSS
Aruncarea CSS-ului a fost o idee bună, dar în același timp, mai ales pentru mințile cadrelor-cadre, acestea sunt adesea folosite ca „place”. De exemplu, Erik a presupus că alți comercianți cu amănuntul vor începe să folosească site-uri pe baza următoarelor stiluri de reduceri, afectându-le prin urmare, iar prima versiune a Meyer Reset a inclus imediat următoarea regulă:
/* Amintiți-vă că trebuie să setați stiluri de focalizare! */ :focus (contur: 0; )
Din păcate, în realitate, nu toată lumea a atribuit stiluri pentru a se concentra, iar Erik a văzut-o dintr-o altă versiune.
Treci peste zastosovuyuchi, simți că ai puțină pâine. Eliminarea stilurilor de browser pentru procesare face dificilă dimensionarea celor care sunt responsabile pentru aspectul elementului skin, ceea ce ajută și la comutarea, astfel încât elementele să rămână blocate în spatele semanticii și nu pentru decorare. Dar pentru elementele de tip i și em, stilul browserului este același. Alte stiluri de browser, cum ar fi dimensiunea ridicol de mare a textului antetului, s-au schimbat și au devenit mai insuportabile. Probleme apar dacă doriți să salvați elementul HTML aruncat după transfer fără a utiliza stilurile de aruncare „non-intruzive” desemnate.
Cea mai puțin importantă problemă cu reducerile este drop-off-ul, care duce la spam în instrumentele browserului. Dacă încercați să remediați o problemă CSS cu elemente imbricate adânc în codul altcuiva, nu vă putem ajuta:
Reguli CSS care se repetă prin compresie
NORMALIZE.CSS
Nicholas Gallagher și Jonathan Neal au dezvoltat o abordare diferită folosind Normalize.css, „un fișier CSS mic care asigură coerența între browsere în stilul elementelor HTML”. Ca și în cazul reducerilor CSS, ne oferă un punct de plecare de încredere în cross-browser - în primul rând, principalul motiv al lipsei reducerilor - dar cele două abordări diferă din punct de vedere filozofic.
Drop CSS poate fi folosit pentru a stila agentul clientului și pentru a roti elementele anonime la starea lor „nestilată”, unde puteți fi prezent în siguranță. Cu toate acestea, trebuie să recunoaștem stilurile majorității elementelor înainte de a le putea folosi. Funcția Normalize.css se adresează doar inconsecvențelor stilurilor de agent de dezvoltare, alegând parametrii cei mai potriviți pentru considerentele în care se află. Aici avem, de asemenea, o bază complet sigură între browsere, care include stiluri de agenți client normalizate care sunt gata pentru dezvoltarea materialelor de construcție de bază. Accentul principal se pune pe o versiune idealizată a foii de stil cross-browser bazată pe CSS 2.1. În ambele cazuri, trebuie să adăugăm mai multe stiluri dominante imaginii create, altfel, dacă pierdem personalizarea browserului în Normalize.css, trebuie să adăugăm mai puține stiluri.
Modificările aduse Normalize.css sunt mai bine direcționate. Instrumentele de dezvoltare ale browserului nu au o cascadă de rescrieri de reguli. Axa ul:, „defectuat” pentru ajutor Meyer Reset și Normalize.css versiunile 1 și 2:
Elementul „Ștergeri” dintr-o listă neordonată
Resetare Meyer
Zastosovamo Normalize.css v1
Aplicarea Normalize.css v2
Se pare că există o diferență de filozofie, dacă aplicația Meyer Reset apare ca câteva rânduri de text simplu fără margini sau marcatori, atunci aplicația Normalize.css este similară cu stilurile din spatele wrapper-urilor. Diferența de stiluri care au fost consolidate la acest nivel este, de asemenea, ușor de observat.
Cu toate acestea, nu toate stilurile sunt incluse în ul. Din motive de claritate, faceți o captură de ecran cu aceeași captură de ecran „intimidatoare”, împreună cu stilurile vizibile ale agentului, Firefox 21 și Opera Next 15.
Skidannya CSS(eliminarea stilurilor) - aceasta înseamnă eliminarea CSS suplimentară și a altor parametri ai elementelor HTML pe care browserele îi stabilesc pentru promovare. De exemplu, înaintea unor astfel de elemente puteți adăuga paragrafe (etichete), care au de obicei câmpuri verticale non-nule (CSS), liste cu marcatori (etichete), care au nu numai câmpuri, ci și markeri de același tip (CSS), etc. .
Acum să ne gândim la ce avem nevoie atunci când aruncăm CSS, ce îi putem oferi? Este bine să știți că ați ars paginile site-ului dvs. și nu ați schimbat câmpurile de paragraf pe care browserele v-au instruit să le faceți, pentru că dețineți complet controlul asupra dimensiunii lor. Dar spune-mi, cu drag, de ce te-ai gândit că toate browserele din lume, care există deja și încă apar, creează câmpuri chiar de această dimensiune? Mai mult, de ce ai încredere că acele browsere în care ți-ai testat aspectul nu modifică dimensiunea acestor câmpuri în versiunile lor actuale și nici nu le elimină în versiunile viitoare? Poți mirosi ceea ce mirosi?
Deci, atunci când șterg CSS, designerii de aspect se protejează pur și simplu de astfel de inconsecvențe, ștergând mai întâi toate valorile „critice” ale controalelor CSS din elemente și apoi, dacă este necesar, adăugându-le înapoi, chiar și cu propriile dimensiuni. Astfel, vă putem aminti că site-ul apare la fel în toate browserele. Desigur, nu puteți șterge stiluri, ci pur și simplu setați parametrii necesari elementelor în timpul aspectului și aici există riscul ca totul să fie cheltuit aici și în momentul următor totul să fie „reîncărcat”.
Pe baza celor de mai sus, una dintre caracteristicile CSS este că, după ce este înghețat, o mulțime de elemente HTML își pierd aspectul original. Și în timp ce pierderea marjelor din paragrafe este destul de de înțeles pentru începători, de exemplu, faptul că butoanele create în spatele etichetelor suplimentare sau a raportului au devenit mai asemănătoare cu textul original este o dezamăgire completă. Cu toate acestea, nu este nevoie să vă înșelați și chiar și în acest scop, stilurile sunt reduse, astfel încât designerul de layout să nu uite apoi să le introducă din nou.
Există o mulțime de moduri de a schimba stilurile, iar cea pe care o alegi depinde de tine, dar pot să-ți spun un lucru - cel mai bun mod este cel pe care l-ai creat singur, bazându-te pe propriile cunoștințe și cunoștințe. Dacă nu aveți încă astfel de informații, puteți apela rapid la una dintre opțiunile enumerate mai jos.
Asigurați-vă că specificați mai întâi stiluri pentru trimiterea CSS la codul de bază, altfel acțiunile cu parametri nu pot fi procesate prin priorități de stil, care sunt instalate de browsere atunci când procesează pagina HTML și codul CSS.
Skid CSS pentru ajutorul unui selector universal
* (font-family: inherit; /* toate elementele sunt reduse în funcție de fontul lor */ font-style: inherit; /* imaginea este redusă */ font-weight: inherit; /* greutatea este redusă */ vertical-align: linia de bază; /* aliniere verticală de-a lungul liniei de bază */ dimensiunea fontului: 100%;/* dimensiunea fontului 100%; margine: 0 /* selectează câmpuri */ padding: 0 /* selectează intrări */ )Descrierea fundului
Al cui fund pentru ajutor selector universal Stilurile specificate sunt aplicate imediat tuturor elementelor HTML care vor fi prezente pe pagină. După cum puteți vedea, majoritatea puterilor sunt rezervate în scopuri de asigurare, motiv pentru care semnificațiile lor sunt indicative pentru modul în care browserele pot implementa specificațiile CSS în consecință. Dar, după cum știți deja, în practică totul nu este deloc așa și, deoarece puterea este redusă efectiv de elementele părinților lor în toate browserele moderne, atunci câmpurile externe în sine, specificate de puterea CSS, nu sunt întotdeauna inițial egale cu zero.
Și axa dimensiunii cadrelor (CSS) și contururilor (CSS) implicit nu depășește zero, dar și specificațiile. Cu toate acestea, această activitate a fost resetată la zero, astfel încât designerul de layout nu a uitat să o indice clar unde ar fi nevoie.
Aruncă CSS de la Yahoo!
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td (marja: 0; padding: 0 ) fieldset,img,abbr,acronym (border: 0; ) address,caption,cite,code,dfn,em,strong,th,var (font-style: normal; font-weight: normal; ) tabel ( border-collapse: collapse; /* spațiu între tabelul din mijloc */ border-spacing: 0; /* golirea spațiului dintre mijloc */ ) caption,th ( text-align: left; /* aliniază textul la stânga */ ) ol,ul (stil listă: niciunul; /* selectarea marcatorilor listei */ ) h1,h2,h3,h4,h5,h6 (dimensiunea fontului: 100%; greutatea fontului: normal; ) q: înainte,q :după (conținut: ""; /* înclină labele etichetei Q */ )Descrierea fundului
Compania Yahoo și-a dezvoltat recent propria opțiune pentru eliminarea stilurilor. Aici puterea elementelor specifice este deja în schimbare, ceea ce permite o mai mare flexibilitate în gestionarea aspectului exterior. De exemplu, aici markerii sunt aranjați din liste, iar eticheta își are picioarele în spatele puterii suplimentare a CSS. Avantajele acestei abordări sunt evidente, iar axa dezavantajelor poate include mai mult și uneori cod redundant. Dar nimeni nu vă cere să schimbați CSS-ul pentru propriile nevoi. Da, puteți elimina lucrurile de care nu aveți nevoie selectoare de etichete sau nu doar aranjați labele, ci oferiți-le imediat aspectul nou necesar.
Scădere CSS de Eric Meyer
html,body,div,span,applet,obiect,iframe,h1,h2,h3,h4,h5,h6,p, blockquote,pre,a,abbr,acronim,adresă,big,cite,code,del,dfn, em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset, formular,etichetă,legendă,tabel,legendă,corp,tfoot,thead,tr,th,td,articol,deoparte,pânză,detalii,incorporare,figura,figcaption,footer,header,hgroup,meniu,nav, output,ruby, secțiune, rezumat, timp, marcaj, audio, video ( marjă: 0; umplutură: 0; chenar: 0; dimensiunea fontului: 100%; font: moștenire; aliniere verticală: linie de bază; ) articol, deoparte, detalii, figcaption, figură, subsol, antet, grup h, meniu, navigare, secțiune ( afișare: bloc; /* elementele de bloc sunt necesare (pentru browserele mai vechi) */ ) body ( înălțimea liniei: 1; /* spațierea rândurilor pentru textul de pe pagină * / ) ol ,ul ( list-style: none; ) blockquote:before,blockquote:after, q:before,q:after (conținut: ""; /* Luând labele din Q și BLOCKQUOTE */ conținut: niciunul; / * adăugat pentru acuratețe */ ) blockquote,q ( ghilimele: niciunul; /* un alt mod de a face ordine */ ) tabel ( border-collapse: collapse; distanță-limită: 0; )Descrierea fundului
O altă modalitate de a renunța la CSS este prin postarea lui Eric Meyer - o revistă populară bazată pe web. Aici ați adăugat deja stiluri reduse pentru etichetele din HTML 5, care, apropo, la momentul scrierii acestui articol erau încă slab acceptate de browserele actuale. Ei bine, în primul rând trebuie să te minunezi de viitor, nu?
De fapt, acest articol ar putea fi continuat pe termen nelimitat, pentru că, repet pentru ultima dată, la momentul potrivit, designerul de layout va veni la versiunea sa a reducerii, sau nu vikorystvoy yogo zagali, bazându-se pe respectul său.
