CSS stílusok visszaállítása, példák működő megoldásokra. Használjam a CSS Reset-et? Állítsa vissza a css fájlt

Sok tördelő tervező használja az ún CSS visszaállítás, amely a különböző böngészők sajátosságainak kiküszöbölésére szolgál. Tulajdonképpen, ez a stílusfájl visszaállítja az összes CSS-tulajdonságot az alapértelmezettre. Ebben a cikkben bemutatom ennek a fájlnak a kódját, és elmondom, hogyan kell Használjam a CSS Reset-et vagy ne?.

Sokfélét láttam már CSS visszaállítás, ezek mind egyformák. Használhatja ezt:

Html, törzs, div, span, kisalkalmazás, objektum, iframe,
h1, h2, h3, h4, h5, h6, p, idézőjel, elő,
a, rövidítés, mozaikszó, cím, nagy, idéz, kód,
del, dfn, em, font, img, ins, kbd, q, s, samp,
kicsi, ütős, erős, sub, sup, tt, var,
b, u, i, közép,
dl, dt, dd, ol, ul, li,
mezőkészlet, űrlap, címke, jelmagyarázat,
táblázat, felirat, tbody, tfoot, thead, tr, th, td (
háttér: átlátszó;
határ: 0;
betűméret: 100%;
margó: 0;
körvonal: 0;
párnázás: 0;
függőleges igazítás: alapvonal;
}
test (
vonalmagasság: 1;
}
ó, ul (
lista-stílus: nincs;
}
idézőjel,q(
idézetek: nincs;
}
blockquote:előtte, blockquote:utána,
q:előtte, q:utána (
tartalom: "";
tartalom: nincs;
}
:focus (
körvonal: 0;
}
asztal (
border-collapse: összeomlás;
határtávolság: 0;
}

Azt hiszem, a használatának okai már világosak, de hogy például én miért nem használom, mint sok más tördelőtervező, arról érdemes beszélni. Először is ezt extra fájl, Másodszor, plusz idő feldolgozáshoz, de ami a legfontosabb, szeretem az alapértelmezett tulajdonságokat. Például ugyanazok a mezők a táblázatban. Hiszen az összes alapértelmezett tulajdonság okkal készült, de a legoptimálisabb lehetőségként a különböző elemek megjelenítésére. Biztosíthatom Önt, miután újraindult párnázás táblázatcellák esetében valószínűleg visszaadja a főfájlban. És távolról sem tény, hogy az érték eltér az alapértelmezetttől. Így kiderül, hogy először eltávolítjuk, majd visszaküldjük. És az első hátrányokkal együtt (egy extra fájl és extra kód) sok elrendezéstervező nem használja CSS visszaállítás.

Akárhogyan is, a stílus visszaállítása nem rossz dolog, így biztonságosan használhatja, ha úgy gondolja, hogy a webhely különböző böngészőkre való adaptációjának leegyszerűsítése valóban leegyszerűsíti az elrendezés egészét.

A szerzőtől: A weboldalépítés az interneten olyan lehet, mint futóhomokra. A böngészők ugyanezt teszik, de időről időre bosszantóan kiszámíthatatlan eltéréseket okoznak. Például minden böngésző rendelkezik "felhasználói ügynök stíluslapokkal" – egy alapértelmezett CSS-stíluskészlettel, hogy a fejléc fejlécnek tűnjön stb., még mielőtt stílusokat rendelne az oldalhoz1. Természetesen minden böngészőmotor kissé eltérő alapértelmezett beállításokat használ.

Az egyik példa az alapértelmezett listastílusok voltak, ahol az Internet Explorer és az Opera alapértelmezett böngészőstílusain kezdetben a lista kitöltés margója volt: 30pt;, míg a Firefox és a KHTML a bal oldali kitöltéssel: 40px;. Ha módosítani szeretné az alapértelmezett kitöltést az ul definiálásával (padding-left: 0;), ez nagyon eltérő eredményeket eredményezne a böngészőkben.

CSS BEÁLLÍTÁSOK VISSZAÁLLÍTÁSA

Egy kis stabilitás elérése érdekében egyes fejlesztők visszaállítják az összes margót és kitöltést egy univerzális választó segítségével:

* (margó: 0; kitöltés: 0;)

Ha megadja a lista behúzását, és ott kezdi a stíluslapot, azt fogja kapni, amit vár. A * használata azonban azt jelentette, hogy az alapértelmezett margó és kitöltés minden elemnél összeomlott, és amint hozzáadott egy űrlapelemet, a dolgok nagyon rosszra fordultak.

A visszaállítás célja, hogy mindent visszaállítson, amit csak lehet... [és] kiindulópontként szolgálhat saját alapvető stílusaihoz- Eric Meyer

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, mozaikszó, cím, nagy, idézet, kód, 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, forma, címke, jelmagyarázat, táblázat, felirat, tbody, tfoot, thead, tr, th, td, cikk, félre, vászon, részletek, beágyaz, ábra, képfelirat, lábléc, fejléc, hgroup, menü, nav, kimenet, rubin, szakasz, összefoglaló, idő, jel, hang, videó (margó: 0; kitöltés: 0; szegély: 0; betűméret: 100%; betűtípus: öröklődik; függőleges igazítás: alapvonal; )

Sok (de nem az összes) elem bizonyos tulajdonságait visszaállítja egyszerű szöveges megfelelőjére. Mivel csak az egyező elemek kerülnek visszaállításra, ezzel elkerülhető néhány probléma * (margó: 0; kitöltés: 0;). Ezután stílusokat határozhatunk meg ezekhez az eldobott "stílus nélküli" tulajdonságokhoz, biztosak lehetünk benne, hogy stabil, több böngészőre épülő alapra építünk. Ez a stílus-hozzárendelés egyben jelzésként is szolgál arra, hogy ezekhez az elemekhez tudatosan megfelelő stílusokat kell beállítani.

PROBLÉMÁK A CSS BEÁLLÍTÁSOK VISSZAÁLLÍTÁSÁVAL

A CSS alaphelyzetbe állítása életmentő volt, de most, különösen a drótvázak térnyerésével, gyakran használják őket úgy, ahogy vannak. Eric például azt feltételezte, hogy más fejlesztők elkezdenek webhelyeket építeni az általa javasolt visszaállítási stílusok köré, ennek megfelelően felülírva azokat, és a Meyer Reset első verziója ideiglenesen tartalmazta ezt a szabályt:

/* ne felejtse el meghatározni a fókuszstílusokat! */ :fókusz ( körvonal: 0; )

Sajnos nem mindenki határozta meg a fókuszstílusokat, és Eric eltávolította a második verzióból.

A visszaállítások használatával egy kicsit perverznek érzi magát. A böngésző alapértelmezett stílusainak visszaállítása arra kényszeríti, hogy átgondolja, hogyan kell az egyes elemeket megjeleníteni, így biztosítható, hogy az elemeket az alapértelmezett stílusok helyett a szemantika alapján alkalmazza. De az olyan elemekhez, mint az i és az em, szinte mindig van egy alapértelmezett böngészőstílus. A böngésző többi alapértelmezett stílusa, például az egykor nevetségesen nagy fejlécszöveg mérete megváltozott, és már alapértelmezés szerint meglehetősen elviselhető. A problémák akkor kezdődnek, amikor valaki csak a hozzárendelt "stílus nélküli" visszaállítási stílusokkal akar utólag átadni egy visszaállított HTML-elemet.

Számomra a visszaállításokkal kapcsolatos legnagyobb probléma az öröklődés, ami spamekhez vezet a böngészőeszközökben. Ha valaki más kódjában mélyen beágyazott CSS-problémát próbál felderíteni, ez nem segít:

A CSS-visszaállítási szabályok öröklődés miatt ismétlődnek

NORMALIZÁLÁS.CSS

Nicholas Gallagher és Jonathan Neal más megközelítést alkalmaztak a Normalize.css-szel, "egy kis CSS-fájllal, amely jobb böngészők közötti konzisztenciát biztosít a HTML-elemek alapértelmezett stílusában." Akárcsak a CSS-visszaállítások esetében, ez is erős, böngészők közötti kiindulópontot ad – ez a fő ok az alaphelyzetbe állítás használatára –, de a két megközelítés filozófiailag különbözik.

A CSS alaphelyzetbe állítása felülírja a felhasználói ügynök stílusait, és sok elemet visszaállít a „stílus nélküli” állapotba, amely egy bizonyos szint, amelyre biztonságosan építhet. Ekkor azonban a legtöbb elemet meg kell formáznunk, mielőtt építhetnénk velük. Ehelyett a Normalize.css csak a felhasználói ügynök stílusának inkonzisztenciáit kezeli, és a legmegfelelőbb alapértelmezett beállításokat választja a különbség érdekében. Itt is egy böngészőkön átívelő biztonságos alapot kapunk, amely azonban normál felhasználói ügynökstílusokat tartalmaz, mint használatra kész alapvető építőelemeket. Ez alapvetően olyasmi, mint az alapértelmezett CSS 2.1 stíluslap idealizált, több böngészőn keresztüli változata. Mindkét esetben hozzá kell adnunk saját domináns stílusainkat a kép létrehozásához, de mivel a Normalize.css alapértelmezett böngészőbeállításai megmaradnak, összességében kevesebb stílust kell hozzáadni.

Mivel a Normalize.css módosításai célzottabbak, a böngésző fejlesztői eszközeiben nincs az átírt szabályok öröklődése. Íme egy egyszerű ul:, a Meyer Reset és a Normalize.css 1-es és 2-es verziójával eltávolítva:

Egy rendezetlen lista „stílus nélküli” eleme

A Meyer Reset alkalmazása

Alkalmazza a Normalize.css v1-et

A Normalize.css v2 alkalmazása

Egyértelmű különbség van a filozófiában, amikor a Meyer Reset példa néhány sor egyszerű szövegként jelenik meg margók, behúzások vagy felsorolásjelek nélkül, míg a Normalize.css példák alapértelmezett stílusoknak tűnnek. Az erre az ul-ra alkalmazott stílusok különbsége is könnyen észrevehető.

Ez azonban nem minden stílus, amelyet az ul. Összehasonlításképpen itt van ugyanaz a „stílus nélküli” képernyőkép, de látható felhasználói ügynök-stílusokkal a Firefox 21-ben és az Opera Next 15-ben.

Minden HTML-oldalelemnek saját alapértelmezett értéke van. És sajnos ezeket nem egyformán értelmezik a különböző böngészők. Emiatt az oldal dizájnja sérül, a megjelenése a böngésző (internetböngésző) váltásakor megváltozik. A stílus-visszaállítási eljárás célja, hogy csökkentse a böngésző következetlenségét olyan dolgokban, mint a sormagasság, margók, fejlécek betűmérete stb.

Példák CSS-stílus-visszaállító szkriptekre

Van egy vélemény, hogy minden önmagát tisztelő webmesternek meg kell írnia saját CSS-visszaállító kódját. De én egy másik megközelítés híve vagyok: vegyél egy kész megoldást, értsd meg és módosítsd, ha kell.

Eric Meyer CSS visszaállítás

Eric Meyer reset szkriptje maga a szerző szerint szándékosan nagyon általános. Például a törzselemnek nincs alapértelmezett háttérszín beállítása. Ezért módosítani, szerkeszteni, bővíteni és egyéb módon testre kell szabni, hogy megfeleljen az Ön igényeinek. Adja hozzá a kívánt színeket az oldalakhoz, hivatkozásokhoz stb.

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licenc: nincs (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, mozaikszó, cím, nagy, idéz, kód, del, dfn, em, img, ins, kbd, q, s, samp, kicsi, ütés, erős, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, cikk, félre, vászon, részletek, beágyazás, ábra, képfelirat, lábléc, fejléc, hgroup, menü, nav, kimenet, rubin, szakasz, összefoglaló, idő, jel, hang, videó (margó: 0; kitöltés: 0; szegély: 0; betűméret: 100%; betűtípus: öröklődik; függőleges igazítás: alapvonal ; ) /* HTML5 megjelenítési szerepkör visszaállítása régebbi böngészőkhöz */ cikk, félre, részletek, képfelirat, ábra, lábléc, fejléc, hcsoport, menü, navigáció, szakasz (megjelenítés: blokk; ) törzs ( sor magassága: 1; ) ol, ul ( lista-stílus: nincs; ) blockquote, q (idézőjelek: nincs; ) blockquote:előtte, blockquote:after, q:before, q:after ( tartalom: ""; tartalom: nincs; ) table ( border- összeomlás: összeomlás; határtávolság: 0; )

Jehu! (YUI 3) Állítsa vissza a CSS-t

A CSS Reset YUI 3 csökkenti a HTML-elemek böngészők általi inkonzisztens stílusát, akárcsak bármely más CSS-visszaállító szkript, így szilárd alapot teremt a webhelyek és webes alkalmazások létrehozásához.

/* YUI 3.18.1 Copyright 2014 Yahoo! Inc. Minden jog fenntartva. Licenc a BSD licenc alatt. http://yuilibrary.com/license/ */ /* A TODO-nak el kell távolítania a HTML-beállításokat, mivel nem tudjuk névteret adni. TODO az előtaggal, választó vagy tulajdonság szerint csoportosítsam a súlycsökkentés érdekében? */ html( color:#000; background:#FFF; ) /* TODO távolítsa el a BODY beállításait, mivel nem tudjuk névteret adni. */ /* TODO teszt, amely egy osztályt a HEAD-ra tesz. - Sikertelen az FF-en. */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO gondolja át az öröklődés másként való kezelését, talán hagyja, hogy az IE6 egy kicsit meghibásodjon ... */ cím, felirat, idézet, kód, dfn, em, strong, th, var ( font-style:normal; font-weight:normal; ) ol, ul ( list-style:none; ) caption, th (szöveg-igazítás:balra; ) h1, h2, h3, h4, h5, h6 (betűméret:100%; betűsúly:normál; ) q:előtte, q:utána (tartalom:""; ) rövidítés, mozaikszó ( border:0; font-variant:normal; ) /* a sormagasság és a választó megjelenésének megőrzéséhez */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) input, textarea , válassza a ( font-family:inherit; font-size:inherit; font-weight: inherit; *font-size:100%; /*az átméretezés engedélyezéséhez IE-hez*/ ) /*mert a jelmagyarázat nem öröklődik az IE-ben * / jelmagyarázat ( color:#000; ) /* YUI CSS-észlelési bélyegző */ #yui3-css-stamp.cssreset ( kijelző: nincs; )

Normalize.css stílusok visszaállítása

A Normalize.css egy egyéni CSS-fájl, amely lehetővé teszi a böngészők számára, hogy az összes elemet következetesebben és a modern szabványoknak megfelelően jelenítsék meg. A szerzők megvizsgálták a különböző böngészők alapértelmezett stílusai közötti különbségeket, hogy csak azokat a stílusokat állítsák be, amelyekhez normalizálásra volt szükség.

/*! normalize.css v6.0.0 | MIT licenc | github.com/necolas/normalize.css */ /* Dokumentum ==================================== = ======================================= */ /** * 1. Javítsa ki a sort magasság minden böngészőben. * 2. Megakadályozza a betűméret módosítását a tájolás megváltozása után az * IE-ben Windows Phone és iOS rendszeren. */ html ( sor magassága: 1,15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Szakaszok =============================================== ========================== */ /** * Adja hozzá a megfelelő megjelenítést az IE 9-ben. */ cikk, félre, lábléc, fejléc, navigáció, szakasz (megjelenítés: blokk; ) /** * Javítsa ki a betűméretet és a margót a "h1" elemeken a "section" és * "article" környezetben Chrome, Firefox és Szafari. */ h1 ( betűméret: 2 em; margó: 0,67 em 0; ) /* Tartalom csoportosítása ============================ = =================================================== ========= */ /** *Adja hozzá a megfelelő megjelenítést az IE 9-ben. * 1. Adja hozzá a megfelelő megjelenítést az IE-ben. */ ábrafelirat, ábra, fő ( /* 1 */ kijelző: blokk; ) /** * Adja hozzá a megfelelő margót az IE 8-ban. */ ábra ( margó: 1em 40px; ) /** * 1. Adja hozzá a megfelelő mezőt méretezés Firefoxban. * 2. Mutassa meg a túlcsordulást az Edge-ben és az IE-ben. */ hr ( dobozméret: tartalomdoboz; /* 1 */ magasság: 0; /* 1 */ túlcsordulás: látható; /* 2 */ ) /** * 1. Javítsa ki a betűméret öröklődését és méretezését minden böngészőben. * 2. Javítsa ki a páratlan "em" betűméretet minden böngészőben. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Szövegszintű szemantika =============== =================================================== === ========= */ /** * 1. Távolítsa el az aktív hivatkozások szürke hátterét az IE 10-ben. * 2. Távolítsa el az aláhúzott hivatkozások hiányosságait iOS 8+ és Safari 8+ esetén. */ a ( háttérszín: átlátszó; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Távolítsa el az alsó szegélyt Chrome 57-ben és Firefox 39-ben . * 2. Adja hozzá a megfelelő szövegdekorációt a Chrome, az Edge, az IE, az Opera és a Safari böngészőben. */ abbr (szegély-alsó: nincs; /* 1 */ text-decoration: aláhúzás; /* 2 */ text-decoration: aláhúzás pontozott; /* 2 */ ) /** * Megakadályozza a `bolder duplikált alkalmazását ` a következő szabály szerint a Safari 6-ban. */ b, strong ( font-weight: inherit; ) /** * Adja hozzá a megfelelő betűméretet a Chrome-ban, az Edge-ben és a Safariban. */ b, erős ( font-weight: bolder; ) /** * 1. Javítsa ki a betűméret öröklődését és méretezését minden böngészőben. * 2. Javítsa ki a páratlan "em" betűméretet minden böngészőben. */ kód, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Adja hozzá a megfelelő betűstílust az Android 4.3-ban. */ dfn ( betűstílus: dőlt; ) /** * Adja hozzá a megfelelő hátteret és színt az IE 9-ben. */ jel ( háttérszín: #ff0; szín: #000; ) /** * Adja hozzá a megfelelő betűméretet minden böngészőben. */ kicsi (betűméret: 80%; ) /** * Megakadályozza, hogy a "sub" és "sup" elemek befolyásolják a sormagasságot * minden böngészőben. */ sub, sup ( betűméret: 75%; vonalmagasság: 0; pozíció: relatív; függőleges igazítás: alapvonal; ) sub ( alul: -0,25 em; ) sup ( felül: -0,5 em; ) /* Beágyazott tartalom ================================================= ================ =========================== */ /** * Adja hozzá a helyes megjelenítés IE 9-ben. */ audio, video ( kijelző: inline-block; ) /** * Adja hozzá a megfelelő megjelenítést az iOS 4-7 rendszerben. */ audio:not() ( kijelző: nincs; magasság: 0; ) /** * Távolítsa el a szegélyt a hivatkozásokon belül az IE 10-ben. */ img ( border-style: none; ) /** * A túlcsordulás elrejtése az IE-ben. */ svg:not(:root) ( túlcsordulás: rejtett; ) /* Űrlapok ================================ = ================================================== ====== */ /** * Távolítsa el a margót a Firefoxban és a Safariban. */ gomb, bemenet, optgroup, kijelölés, szövegterület ( margó: 0; ) /** * A túlcsordulás megjelenítése IE-ben. * 1. Jelenítse meg a túlcsordulást az Edge-ben. */ gomb, bemenet ( /* 1 */ túlcsordulás: látható; ) /** * Távolítsa el a szövegátalakítás öröklődését az Edge, Firefox és IE programban. * 1. Távolítsa el a szövegátalakítás öröklődését a Firefoxban. */ gombbal válassza ki ( /* 1 */ text-transform: none; ) /** * 1. Akadályozza meg a WebKit-hibákat, ahol a (2) tönkreteszi a natív "hang" és "video" * vezérlőket Android 4-ben. * 2. Javítsa ki a kattintható típusok stílusának hiányát iOS és Safari rendszerben. */ gomb, html , /* 1 */ , ( -webkit-megjelenés: gomb; /* 2 */ ) /** * Távolítsa el a belső szegélyt és a kitöltést a Firefoxban. */ gomb::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner ( border-style: none; padding: 0; ) /** * Az előző szabály által érvénytelenített fókuszstílusok visszaállítása. */ gomb:-moz-fókuszálás, :-moz-fókuszálás, :-moz-fókuszálás, :-moz-fókuszálás ( körvonal: 1px pontozott ButtonText; ) /** * 1. Javítsa ki a szöveg tördelését Edge-ben és IE-ben. * 2. Javítsa ki a szín öröklődését az IE `fieldset` elemeiből. * 3. Távolítsa el a kitöltést, hogy a fejlesztők ne maradjanak ki, amikor nullázzák a * `fieldset` elemeket minden böngészőben. */ jelmagyarázat ( dobozméret: keret-doboz; /* 1 */ szín: öröklődik; /* 2 */ megjelenítés: táblázat; /* 1 */ max-szélesség: 100%; /* 1 */ kitöltés: 0 ; /* 3 */ szóköz: normál; /* 1 */ ) /** * 1. Adja hozzá a megfelelő megjelenítést az IE 9-ben. * 2. Adja hozzá a megfelelő függőleges igazítást a Chrome-ban, a Firefoxban és az Operában. */ folyamat (megjelenítés: inline-block; /* 1 */ függőleges igazítás: alapvonal; /* 2 */ ) /** * Az alapértelmezett függőleges görgetősáv eltávolítása az IE-ből. */ textarea ( túlcsordulás: auto; ) /** * 1. Adja hozzá a megfelelő dobozméretet az IE 10-ben. * 2. Távolítsa el a párnázást az IE 10-ben. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * A növekmény és a csökkentés gombjainak kurzorstílusának javítása a Chrome-ban. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( magasság: auto; ) /** * 1. Javítsa ki a furcsa megjelenést a Chrome-ban és a Safariban. * 2. Javítsa ki a vázlat stílusát a Safariban. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Távolítsa el a belső kitöltés és a Mégse gombokat a Chrome és a Safari macOS rendszeren. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Javítsa ki a kattintható típusok stílusának hiányát iOS és Safari rendszerben. * 2. Módosítsa a betűtípus tulajdonságait "örököl" értékre a Safariban. */ ::-webkit-file-upload-button ( -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ ) /* Interaktív ============ =================================================== === ============ */ /* * Adja hozzá a megfelelő megjelenítést az IE 9-ben. * 1. Adja hozzá a megfelelő megjelenítést az Edge, IE és Firefox böngészőben. */ részletek, /* 1 */ menü ( kijelző: blokk; ) /* * Adja hozzá a megfelelő megjelenítést minden böngészőben. */ összefoglaló ( megjelenítés: listaelem; ) /* Szkriptelés ==================================== = ======================================= */ /** * Adja hozzá a megfelelő megjelenítést IE 9-. */ canvas ( display: inline-block; ) /** * Adja hozzá a megfelelő megjelenítést az IE-ben. */ sablon ( kijelző: nincs; ) /* Rejtett ====================================== ==================================== */ /** * Adja hozzá a megfelelő megjelenítést az IE 10-ben - . */ ( kijelző: nincs; )

Visszaállítás univerzális választóval * (csillag)

Első pillantásra ez tűnhet a legegyszerűbb és legsikeresebb megoldásnak; miért kell leírni az összes HTML-elemet, és értékeket rendelni hozzájuk, ha használhatja a * választót, mert a hatása az összes HTML-re vonatkozik.

* ( margó: 0; kitöltés: 0; )

De sajnos ez nem jó gyakorlat. Nagyon nehéz (más CSS-visszaállítási eljárásokhoz képest időigényes) a böngésző számára szabályokat alkalmazni a dokumentum minden elemére, különösen nagy weboldalakon, és sok jó alapértelmezett stílust is tönkretehet.

A stílusok és a WordPress visszaállítása

Ha a fent leírt módszerek valamelyikével szeretné visszaállítani a CSS-stílusokat egy WordPress webhelyen, akkor ezt kétféleképpen teheti meg.

Az első az, hogy a reset kódot a WordPress témája style.css fájljának elejére kell másolnia (a szerzőről és a téma nevéről szóló sorok után, vagyis a törttel és egy csillaggal körülvett szöveg után /* ... */.

Ebben a cikkben a stílusok visszaállításáról fogunk beszélni, és egy ilyen reset.css fájl létrehozására tekintünk meg egy példát.

A dobóstílusok ötlete körülbelül 10 évvel ezelőtt jelent meg. Ami tulajdonképpen abból állt, hogy az oldalt egy kis CSS-stíluskészlet segítségével minden böngészőben egyformán nézték ki. Ez persze nem mindig sikerül, de néhány dolgot ki lehet javítani – például az IE egyes verzióiban nem egyértelmű, hogy honnan jön a határ. Vagy egy kék körvonal (körvonal) a mezők közelében.

Nem titok a front-end fejlesztők számára, hogy a böngészők nagyon válogatósak, és mindegyik a maga módján dolgozza fel a HTML elemeket, saját szabványos stílusokat adva hozzá.

Mivel ez az ötlet már régóta létezik, nem meglepő, hogy már vannak kész reset fájlok, általában reset.css néven, és minden projekthez csatlakoznak.

Miért külön fájlban? Igen, egyszerűen azért, mert kényelmesebb átvinni őket projektről projektre.

Íme egy példa a reset.css fájlra 2007-ből:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licenc: nincs (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, mozaikszó, cím, nagy, idéz, kód, del, dfn, em, img, ins, kbd, q, s, samp, kicsi, ütés, erős, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, cikk, félre, vászon, részletek, beágyazás, ábra, képfelirat, lábléc, fejléc, hgroup, menü, nav, kimenet, rubin, szakasz, összefoglaló, idő, jel, hang, videó (margó: 0; kitöltés: 0; szegély: 0; betűméret: 100%; betűtípus: öröklődik; függőleges igazítás: alapvonal ; ) /* HTML5 megjelenítési szerepkör visszaállítása régebbi böngészőkhöz */ cikk, félre, részletek, képfelirat, ábra, lábléc, fejléc, hcsoport, menü, navigáció, szakasz (megjelenítés: blokk; ) törzs ( sor magassága: 1; ) ol, ul ( lista-stílus: nincs; ) blockquote, q (idézőjelek: nincs; ) blockquote:előtte, blockquote:after, q:before, q:after ( tartalom: ""; tartalom: nincs; ) table ( border- összeomlás: összeomlás; határtávolság: 0; )

Ez csak egy szabvány ehhez a fájlhoz, amelyet a webfejlesztők egy bizonyos köre fogadott el.

Azt tanácsolom Önnek, akár tapasztalt programozó, akár csak most kezdi, hogy fejlessze ki saját reset fájlját. A fent leírt szabványt veheti alapul, kiegészítheti saját szelektoraival, vagy módosíthatja a meglévőket. Íme egy példa egy ilyen fájlra, amelyet magamnak fejlesztettem ki:

input, textarea,a , button, select(outline:none) img (border:none;) hr ( clear:both; border:none; background:none; ) * ( background-repeat:no-repeat; ) /* HTML5 megjelenítési szerepkör visszaállítása régebbi böngészőkhöz */ cikk, félre, részletek, képfelirat, ábra, lábléc, fejléc, hcsoport, menü, navigáció, szakasz ( megjelenítés: blokk; ) törzs ( sor magassága: 1; ) ol, ul ( lista -style: nincs; margó:0; padding:0; ) blockquote, q (idézőjelek: nincs; ) blockquote:előtte, blockquote:utána, q:előtte, q:utána (tartalom: ""; tartalom: nincs; ) táblázat (szegély-összecsukás: összecsukás; szegély-köz: 0; )

A fenti kódok bármelyikét másolhatja személyes használatra, de ha cikkeiben használja, kérjük, adjon meg egy hivatkozást a forrásra.

Az IE és az Opera Mini családok kivételével.

Mivel az IE támogatásának hiánya okozhatja a problémát, íme néhány módszer néhány CSS-tulajdonság eredeti értékére való visszaállítására:

Reset-this ( animáció: nincs; animáció-késleltetés: 0; animáció-irány: normál; animáció-időtartam: 0; animáció-kitöltés-mód: nincs; animáció-iteráció-számlálás: 1; animáció-név: nincs; animáció- lejátszási állapot: futás, animáció-időzítés funkció: könnyű background-origin: padding-box; background-position: 0 0; background-position-x: 0; background-position-y: 0; background-repeat: repeat; background-size: auto auto; border: 0; border- stílus: nincs; szegélyszélesség: közepes; szegély színe: öröklődik; szegély-alsó: 0; szegély-alsó szín: örököl; szegély-alsó-bal-sugár: 0; szegély-alul-jobb-sugár: 0; szegély-alsó stílus: nincs; szegély-alsó szélesség: közepes; szegély-összecsukás: külön; keret-kép: nincs; szegély-bal: 0; szegély-bal-szín: örököl; szegély-bal stílus: nincs; szegély-bal-szélesség: közepes, szegély-sugár: 0; határ-jobb: 0; szegély-jobb-szín: örököl; border-right-style: nincs; határ-jobb-szélesség: közepes; határtávolság: 0; border-top: 0; border-top-color: örököl; szegély-bal felső-sugár: 0; határ-jobb felső-sugár: 0; border-top-style: nincs; keret-felső szélesség: közepes; alsó: auto; box-shadow: nincs; box-sizing: content-box; felirat oldala: felső; világos: nincs; clip:auto; szín: örököl; oszlopok: auto; oszlopszám: auto; oszlopkitöltés: egyensúly; oszlopköz: normál; oszlop-szabály: közepes none currentColor; oszlop-szabály-szín: currentColor; oszlop-szabály-stílus: nincs; oszlop-szabály-szélesség: nincs; oszlopfesztáv: 1; oszlopszélesség: auto; tartalom: normál; ellennövekmény: nincs; ellen-reset: nincs; kurzor: auto; irány: ltr; kijelző: inline; üres cellák: mutat; úszó: nincs; betűtípus: normál; font-family: inherit; betűméret: közepes; betűstílus: normál; font-változat: normál; betűsúly: normál; magasság: auto; kötőjelek: nincs; balra: auto; betűköz: normál; vonalmagasság: normál; lista-stílus: nincs; list-style-image: nincs; lista-stílus-pozíció: kívül; list-style-type: lemez; margó: 0; margó-alsó: 0; margó-bal: 0; margó-jobb: 0; margó felső: 0; max-magasság: nincs; max-szélesség: nincs; min-magasság: 0; min-szélesség: 0; átlátszatlanság: 1; árvák: 0; körvonal: 0; körvonal-szín: fordított; vázlat-stílus: nincs; körvonal-szélesség: közepes; túlcsordulás: látható; túlcsordulás-x: látható; túlcsordulás-y: látható; párnázás: 0; párnázás-alsó: 0; padding-bal: 0; padding-right: 0; padding-top: 0; oldaltörés után: auto; oldaltörés előtt: auto; page-break-inside: auto; perspektíva: nincs; perspektíva-eredet: 50% 50%; pozíció: statikus; /* Előfordulhat, hogy módosítani kell az idézőjeleket a különböző nyelvterületekhez (pl. fr) */ idézetek: "\201C" "\201D" "\2018" "\2019"; jobbra: auto; fülméret: 8; táblázat-elrendezés: auto; text-align: inherit; text-align-last: auto; szöveg-dekoráció: nincs; szöveg-dísz-szín: örököl; text-decoration-line: nincs; szöveg-dekorációs stílus: tömör; szöveg-behúzás: 0; szöveg-árnyék: nincs; szöveg-transzformáció: nincs; top:auto; transzformáció: nincs; transzformációs stílusú: lapos; átmenet: nincs; átmenet-késleltetés: 0s; átmeneti időtartam: 0 s; átmeneti tulajdonság: nincs; átmeneti időzítés funkció: könnyű; unicode-bidi: normál; függőleges igazítás: alapvonal; láthatóság: látható; szóköz: normál; özvegyek: 0; szélesség: auto; szóköz: normál; z-index: auto; /* alapvető modern javítás */ all: kezdeti; mind: nincs beállítva; ) /* alapvető modern javítás */ #reset-this-root ( all: kezdeti; * ( all: unset; ) )

• Releváns github repo 2017 decemberéből meggyőzőbb lista

Amint azt @user566245 megjegyzésében említette:

Ez elvileg igaz, de az egyéni futásteljesítmény változhat. Például néhány elemnek, például az alapértelmezett szövegterületnek van szegélye, az alaphelyzetbe állítás alkalmazása csökkenti a szövegterület határait.

A Joost-felhasználó vásárolta meg, hogy a modern normává váljon

#reset-this-parent ( all: kezdeti; * ( all: Unset; ) )

PÉLDA A W3-BÓL

Ez hasznos lehet egy olyan oldalon található gyökér "widget" elemnél, amely nem akarja örökölni a külső oldal stílusait. Ne feledje azonban, hogy az adott elemre alkalmazott "alapértelmezett" stílus (például: display:block az UA stíluslapjáról a blokkelemeken) szintén el lesz távolítva.

Gondolt valakinek a css-n kívül másra, hogy visszaállítsa a css-t? Igen?

Van egy ilyen vészhelyzeti segédprogram:

A getElementsByTagName("*") minden elemet visszaad a DOM-ból. Ezután stílust állíthat be a gyűjtemény minden eleméhez:

Var allElements = document.getElementsByTagName("*"); for (var i = 0, len = allElements.length; i< len; i++) { var element = allElements[i]; // element.style.border = ... }

Mindezekkel együtt; Nem hiszem, hogy a css alaphelyzetbe állítása kivitelezhető, hacsak nem egy webböngészőt használunk. Ha a végén a "böngésző" értéke "alapértelmezett".

Összehasonlításképpen itt található a Firefox 40.0 értékeinek listája

ahol font-style: oblique elindítja a DOM műveletet.

Align-content: unset; align-items: unset; align-self: unset; animáció: unset; megjelenés: beállítatlan; hátoldali láthatóság: nincs beállítva; background-blend-mode: unset; háttér: nincs beállítva; kötés: unset; blokkméret: nincs beállítva; border-block-end: unset; border-block-start: unset; border-collapse: unset; border-inline-end: unset; border-inline-start: unset; border-radius: unset; border-spacing: unset; határ: nincs beállítva; alsó: nincs beállítva; box-align: unset; box-decoration-break: unset; doboz iránya: nincs beállítva; box-flex: nincs beállítva; box-ordinal-group: unset; box-orient: unset; doboz-csomag: beállítatlan; box-shadow: unset; dobozméretezés: beállítatlan; felirat-oldal: nincs beállítva; tiszta: beállítatlan; clip-path: unset; clip-rule: unset; klip: nincs beállítva; color-adjust: unset; szín-interpolációs szűrők: nincs beállítva; szín-interpoláció: nincs beállítva; szín: beállítatlan; oszlopkitöltés: nincs beállítva; oszlop-rés: nincs beállítva; oszlop-szabály: nincs beállítva; oszlopok: nincs beállítva; tartalom: unset; kontroll-karakter-láthatóság: nincs beállítva; ellennövekmény: hatástalanított; counter-reset: kikapcsolva; kurzor: nincs beállítva; kijelző: nincs beállítva; domináns-alapvonal: nincs beállítva; üres cellák: nincs beállítva; kitöltési átlátszatlanság: nincs beállítva; fill-rule: unset; fill: unset; szűrő: nincs beállítva; flex-flow: nincs beállítva; flex: nincs beállítva; float-edge: unset; úszó: beállítatlan; árvíz színe: beállítatlan; elárasztási átlátszatlanság: nincs beállítva; font-family: unset; font-feature-settings: unset; font-kerning: unset; font-language-override: unset; font-size-adjust: unset; font-size: unset; font-stretch: unset; font-style:ferde; font-synthesis: unset; font-variáns: unset; font-weight: unset; betűtípus: ; force-broken-image-icon: unset; magasság: nincs beállítva; kötőjelek: unset; kép tájolása: nincs beállítva; kép-régió: nincs beállítva; képmegjelenítés: nincs beállítva; ime-mode: unset; soron belüli méret: nincs beállítva; izoláció: beállítatlan; justify-content: unset; justify-ites: unset; igazolja-én: unset; balra: nincs beállítva; betűköz: nincs beállítva; világítás színe: nincs beállítva; vonalmagasság: nincs beállítva; lista-stílus: nincs beállítva; margin-block-end: unset; margin-block-start: unset; margin-inline-end: unset; margin-inline-start: unset; margó: nincs beállítva; marker-offset: unset; marker: nincs beállítva; maszk típusa: nincs beállítva; maszk: nincs beállítva; max-block-size: unset; max-magasság: nincs beállítva; max-inline-size: nincs beállítva; max-width: nincs beállítva; min-block-size: unset; min-magasság: nincs beállítva; min-inline-size: nincs beállítva; min-width: nincs beállítva; mix-blend-mode: unset; objektum-illesztés: nincs beállítva; objektum pozíciója: nincs beállítva; offset-block-end: unset; offset-block-start: unset; offset-inline-end: unset; offset-inline-start: unset; átlátszatlanság: nincs beállítva; sorrend: nincs beállítva; orient: beállítatlan; körvonal-eltolás: beállítatlan; körvonal-sugár: nincs beállítva; körvonal: nincs beállítva; túlcsordulás: nincs beállítva; padding-block-end: unset; padding-block-start: unset; padding-inline-end: unset; padding-inline-start: unset; padding: unset; page-break-after: unset; page-break-before: unset; page-break-inside: unset; festési sorrend: beállítatlan; perspektíva-eredet: beállítatlan; perspektíva: nincs beállítva; pointer-events: unset; pozíció: nincs beállítva; idézetek: unset; átméretezés: unset; jobbra: nincs beállítva; ruby-align: nincs beállítva; rubin pozíció: nincs beállítva; scroll-behavior: unset; scroll-snap-coordinate: unset; scroll-snap-destination: unset; scroll-snap-points-x: nincs beállítva; scroll-snap-points-y: nincs beállítva; scroll-snap-type: unset; alakzat-visszaadás: beállítatlan; stack-sizing: unset; stop-szín: beállítatlan; stop-opacitás: nincs beállítva; stroke-dasharray: nincs beállítva; stroke-dashoffset: nincs beállítva; stroke-linecap: unset; stroke-linejoin: nincs beállítva; stroke-miterlimit: nincs beállítva; stroke-opacitás: nincs beállítva; löketszélesség: nincs beállítva; löket: nincs beállítva; lapméret: nincs beállítva; táblázat-elrendezés: nincs beállítva; text-align-last: unset; text-align: unset; text-anchor: unset; text-combine-upright: unset; text-decoration: unset; text-emphasis-position: unset; szövegkiemelés: unset; text-indent: unset; szöveg-tájolás: nincs beállítva; text-overflow: unset; text-rendering: unset; text-shadow: unset; text-size-adjust: unset; text-transform: unset; felső: nincs beállítva; transzformációs eredet: unset; transzformációs stílus: unset; transzformáció: unset; átmenet: nincs beállítva; felhasználói fókusz: nincs beállítva; felhasználói bemenet: nincs beállítva; user-modify: unset; user-select: unset; vektor-effektus: unset; függőleges igazítás: nincs beállítva; láthatóság: nincs beállítva; szóköz: nincs beállítva; szélesség: nincs beállítva; meg fog változni: nincs beállítva; ablak húzása: beállítatlan; szótörés: unset; szóköz: unset; word-wrap: unset; írási mód: kikapcsolva; z-index: nincs beállítva;