A CSS3 kód megtartása Slim
A webes fejlesztők sok időt takaríthatnak meg a kifinomultabb CSS3 szintaxis használatával. Azok a felhasználók, akik meglátogatják az oldalt, a lehető leggyorsabb betöltési időt várják - ez teszi a felelősséget, hogy a fájlméreteket lefelé tartsa. A CSS-el és különösen az új CSS3-modellnek köszönhetően rengeteg szkennelési trükkö van.
Néhány ilyen ötletet összeállítottam az alábbi útmutatóba. Más területeket is meg kell érintenünk, mint például a CSS-kód tömörítése. Vannak olyan böngésző eszközök, amelyek segítségével a fejlesztők támogathatják a stílust, de szeretné egyesíteni a fájlméret-csökkentéssel rendelkező rövid kódokat, hogy végső soron egyszerűsítsék webhelye megjelenítési folyamatát.
Alapvető tippek a formázáshoz
Mielőtt az aktuális CSS-szintaxisra ugornánk, át akarok menni a témakörben hogyan írja a CSS-t. Ha már kicsit ismeri a webes tervezést, valószínűleg korábban egy stíluslapot látott, valószínűleg többször is. Az egyes parancsok első részét az választó. Ez az elem típusát célozza meg, amely megkapja azokat a stílusokat, amelyeket a göndör nadrágtartóba helyeznek, más néven tulajdonságok.
Inline szint
Az inline stílusokkal minden tulajdonságot egymás után írnak, és csak szóközzel lehet őket elválasztani. Ezt a módszert leginkább olyan szelektorokra alkalmazzuk, ahol csak néhány tulajdonságra van szükség. Ezzel megtakaríthatja a helyet az oldalon, és a stíluslap görgetése sokkal gyorsabb lesz. Abban az esetben, ha korábban még soha nem találkozott a bejövő CSS-szel, hozzáadtam egy kis példát az alábbi HTML-horgony linkek céljára.
a szín: # 648cc8; font-súly: félkövér; a: lebeg szín: # 739cda; szöveg-dekoráció: nincs; a.alt color: # bd4949! fontos;
Blokkszint
Másrészről a blokk-stílusú tulajdonságok egy sor / érték páronként kerülnek bevitelre, és gyakran be vannak vonva a gyorsabb szerkesztésekhez a kód beolvasásakor. A tisztább stíluslapok mintegy 99% -a használta ezt a formázást, és számos tervező számára iparági szabvány lett. Ha a választó több mint 6 vagy 7 tulajdonságot használ, ez a legjobb formázás.
Ha figyelembe vesszük a sok új CSS3 tulajdonságot, akkor azt is észreveheted, hogy milyen gyorsan töltődnek fel a stíluslapok. Ezen tulajdonságok közül sok támogatja a böngészőspecifikus másolatokat, amelyek szinte ismétlődő kódbejegyzéseket igényelnek (például a határ sugarát). Megnézheti az alábbi blokk tulajdonságok példáját, amely egy minta csomagoló div.
.wrap display: block; párnázás: 6px 10px; háttér: #FFF; határ-sugár: 4px; -moz-határ-sugár: 4px; -webkit-border-radius: 4px; -o-határ-sugár: 4px;
A CSS írása egyik módja sem kifejezetten jobb, mint a másik. Végső soron az a választás, mint egy olyan fejlesztő, akinek tetszik a stílusa, és még ez a projekt szerint is működik. Még gyakori, hogy megtalálják a CSS-t, ahol a tervezők összekeverték mindkettőt! Ezt személyesen érzem “folyamatban lévő munkák” a blokkstílusok egyszerűbbek, mivel folyamatosan vizsgálom a stíluslapot, hogy szerkesztéseket vagy kiegészítéseket készítsek. De a forgalmi nehéz területek esetében a CSS-fájl tömörítése az abszolút legjobb út.
Tartsa őket vékonyan
A CSS3-ban rendelkezésre álló sok rövid kód felhasználásával sok fejlesztési időt takaríthat meg. A HTML elemek szerkesztése sokkal könnyebb lesz, ha megérti ezt az időtakarékos lingót. Ezenkívül a kódja tisztább lesz, és könnyebb megnézni.
Az egyetlen hátránya, hogy nem minden böngésző teljes mértékben támogatja ezeket a tulajdonságokat. Számos létező probléma megoldására van lehetőség, mint például az Internet Explorer és a Netscape. Szerencsére a Web mindig halad előre, és mivel a CSS3 népszerűsége növekszik, kétségtelenül a böngésző kompatibilitásának növekedése is tapasztalható..
RGBa színes átlátszóság / opacitás
Az új RGBavalue nem pontosan CSS3 ingatlan, de Az alfa-átlátszóság csak a CSS3-ra jellemző. A közös „Vörös-zöld kék” értékek helyett, amiket most átadhatsz a színnek tartalmaz egy negyedik opciót a színes átlátszóság érdekében. Emiatt a webfejlesztők szinte teljesen átlátható PNG-kkel készülnek.
Az alapszintű szintaxis 0-255 értéket igényel az első három (3) és 0-1,0 alpha pozícióban. A színtartomány az egyes színárnyalatok (RGB) mennyire látható, a 0-nak pedig nincs semmi és 255-ös.
/ ** szintaxis ** / háttér: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** példa ** / div háttér: rgba (255, 255, 255, 0,3);
Böngésző-kompatibilitás
Egy másik tulajdonság átlátszatlanság bizonyos körülmények között használható. Ez azonban hatással lesz a teljes HTML elemre és a belső tartalomra, nem csak a háttérre, amint láttam a példámban.
Sajnos az Internet Explorer még nem támogatja az RGBa színértékét. Ezeknek a kevésbé szabványos böngészőknek általában tartalmaznia kell egy tartalék tulajdonságot, amely teljesen átláthatatlan. Ezt az értéket ugyanazokkal az értékekkel állítja be, de a negyedik (opacitás) nélkül. Úgy néz ki, mint valami rgba (255, 255, 255)
Továbbá az Internet Explorer egy kicsit könnyebben kezelhető a feltételrendszeren keresztül. Tényleg ellenőrizheti, hogy a böngésző IE-t futtat-e, és egy Microsoft CSS-szűrőt jelenít meg a parancsban. Ezt az alábbi példámban mutattam be (jegyezze meg, hogy valahol megjelenik a HTML-fájlban):
CSS3 szegélysugár
Elolvastam néhány zavaró fórum szálat a CSS3-as lekerekített szegélyek létrehozásáról - nem annyira a készítés oldaláról, hanem bonyolult böngésző támogatással, a webfejlesztők a legegyszerűbb kódot kódolják a várakozásoknak megfelelően..
/ ** szintaxis ** / szegélysugár: bal felső bal felső sarok;
A border-radius A tulajdonság hasonló szintaxist oszt meg a szabványos szegély létrehozásához, kivéve ebben az esetben a dobozszögeket célozza. Ez a tulajdonság valójában elfogadja az 1 - 4 értéket, és mindegyik a sarkok eltérő beállítását célozza meg.
- 1 érték: Mind a négy sarok azonos értékre van kerekítve
- 2 érték: Az első érték az
bal felsőésjobb alsómíg a második érték elérijobb felsőésbal alsó - 3 érték: Először a
bal felsősarok, a második mindkettőbal alsó&jobb felsőmíg a 3. és a végső értéket alkalmazzukjobb alsó - 4 érték: Mind a 4 érték a következő sorrendben irányítja a sarkokat: bal felső, bal felső, bal felső sarok
/ ** példa ** / div határ-sugár: 4px 4px 8px 4px; div border-sugar: 4px 4px 8px;
Tehát a fenti kódban használjuk border-radius 4px kerekített hatást kell alkalmazni mindent kivéve a jobb alsó 8px sima görbét kap. Ha észrevette, mindkét kód ugyanazokat a stílushatásokat alkalmazza.
Böngésző-kompatibilitás
Most a fő probléma az, hogy border-radius csak néhány böngészőben támogatott. Az Internet Explorer 9 nemrégiben nagy támogatást kapott és az Opera ezt is megteszi. Még az Opera is létrehozta saját tulajdonát -o-border-radius célzott böngészőmotorjukra. Továbbá -moz-border-radius támogatja a Firefox / Gecko szoftver és a -WebKit-border-radius Google Chrome / Safari számára.
Az alábbi kód egy példa a csupasz csont-sablonra, amely a legmagasabb globális böngésző támogatással lekerekített sarkokat hoz létre.
div határ-sugár: 4px 4px 8px 4px; -webkit-border-sugar: 4px 4px 8px 4px ;; -moz-border-sugár: 4px 4px 8px 4px; -o-határ-sugár: 4px 4px 8px 4px;
Képzelj el egy Drop Shadow-t?
A CSS3 másik igazán félelmetes aspektusa a támogatás doboz és szöveges árnyékok. Ilyen probléma volt a fejlesztők számára a múltban, mivel a háttérképek az egyetlen reális lehetőség. Ez a szintaxis tulajdonképpen egy rövidített szerepét követi, amely sokkal könnyebb, mint az általunk lefedett egyéb tulajdonságok. Nehéz először emlékezni a kulcsfontosságú értékek megfelelő sorrendjére - de minél gyakoribbá válik, annál könnyebb lesz.
Sajnos az Internet Explorer ismét a furcsa. Minden más nagy böngésző, beleértve a Firefoxot, a Google Chrome-ot, a Safari-t és az Opera-t, teljes mértékben támogatja a text-shadow ingatlan. A fejlesztők megpróbálták saját IE-támogatást építeni, de még mindig nagyon korlátozó. Az alapvető szintaxis a következőképpen íródik:
/ ** szintaxis ** / text-shadow: x-offset y-offset-elmosódás-szín; / ** példa ** / div text-shadow: 2px 2px 1px # 111;
Az X és Y eltolás jelzi a böngészőnek, hogy mennyire jobb és alacsony az árnyék. A negatív értékek segítségével az árnyékot balra és balra helyezheti. De ez nagyon kínosnak tűnik, ezért pozitív egész számokat ajánlok. A merev élek kiegyenlítésére akkor is használható, ha a szöveg árnyéka természetellenesnek tűnik.
Ez a szintaxis csak az alapszintű jelölést vizsgálja, amikor egyetlen csepp árnyékhatást hoz létre. A magasan fejlett tervezők tanulmányozták, hogy egyszerre több árnyékot is létrehozhassanak! Ezt a félelmetes blogbejegyzést 2011 áprilisában írom le, amely részletesen bemutatja a szöveges árnyékok bevezetését. Ha van ideje, akkor a tartalmat csak úgy érheti el, hogy ötletet kapjon a fejlettebb funkciókról, és győződjön meg róla, hogy a későbbi hivatkozásként könyvjelzővel látja el.!
Böngésző-kompatibilitás
A legnagyobb detractor, amit bejárunk, az Internet Explorer. Újra és újra a Microsoft elindította saját böngésző renderelő motorját, amely a legjobb esetben al-par. Most még az is, hogy a CSS3 a szöveges árnyékoknál uralkodik, az IE még mindig elmarad. Van egy nagyszerű demo weboldal, ahol megtalálhatók a kód példák és a hagyományos CSS feltételes megjegyzések.
Alapvetően azt szeretné ellenőrizni, hogy a felhasználó által használt böngésző megfelel-e az Internet Explorer 9 vagy annál alacsonyabb verziójának. Ezután az MS szűrők használatával árnyékot alkalmazhatunk bármely szövegelemben (fentebb, egy bekezdést használunk).
Átmenetek egyszerűsítése
CSS3 átmenet a nagymama flapjacksje óta a design piac legmelegebb tulajdonsága! A webes tervezők egy ilyen csípést hoztak a tiszta CSS-átmenetekről, még akkor is, ha a támogatás elsősorban a Webkit böngészőkre korlátozódik. Természetesen a Mozilla és az Opera másodlagos tulajdonságait is használhatja. De a rövidített jelölés valóban lenyűgöző, különösen, ha bármilyen okból kifogásolja a JavaScript animációkat.
Először nézzük meg az eredeti átmeneti tulajdonságot. Ehhez 4 értékre van szükség, amelyek önmagukban is tulajdonságokra bonthatók. Ezek megfelelnek az átmenetnek ingatlan(mi a hatás), tartam(mennyi ideig kell kihúzni), időzítés-funkció(a sebesség változása az animáció felett), és késleltetés(másodpercek száma az animálás előtt).
/ ** szintaxis ** / átmenet: tulajdonságidőzítés-funkció késleltetés; / ** példa ** / img átmenet-tulajdonság: opacitás; átmeneti időtartam: 2s; átmeneti-időzítési funkció: egyszerűség; átmeneti késleltetés: 0,5s;
Intuitív módon meg kell értenie a legtöbb ilyen tulajdonság célját, kivéve az időzítési funkciót. Bár először zavaró, ez a tulajdonság egyszerűen eltéríti az átmenetet, így a hatás lassabb, lassabb, vagy valami hasonló lesz..
W3 Iskoláknak van egy online időzítési funkciója, amely felsorolja az összes lehetséges értéket. Folyamatosan találom magam a Google-nak ezekre az útmutatókra, de ilyen hasznos könyvjelzőket készítenek.
Böngésző-kompatibilitás
Most hozzuk létre a teljes böngésző támogatását. Alapértelmezés szerint az átmeneti tulajdonság csak a Safari újabb verziói támogatják. Mégis sok felhasználónak még mindig szüksége van erre -webKit előtag, amely a Google Chrome-ra és hasonló renderelő motorokra is vonatkozik. Az alábbiakban a “véglegesített” kódblokk-sablon Azt javaslom, hogy a legtöbb böngésző többségéből átmeneti támogatásra van szükség.
img átmenet: átlátszatlanság 2s egyszerűség 1s; -webkit-átmenet: a 2-es opacitás 1-es; / * króm, szafari, állomány * / -moz-átmenet: opitás 2s könnyű-in 1s; / * mozilla + gecko * / -o-átmenet: opitás 2s könnyű-in 1s; / * opera * /
Szövegvonási hatások
Ez a tulajdonság nem nagy, és nem talál sok webes tervezőt, akik ma használják. De használhatod text-stroke- építsen néhány igazán szép hatást a betűtípusaival. A Webkit böngészők, mint például a Safari és a Chrome, az egyetlen igazi támogatója ennek a tulajdonságnak. Az Opera és a Firefox nehezen rendezheti a szöveges objektumokat azokkal a körvonalakkal.
/ ** szintaxis ** / p -webkit-text-stroke: szélesség színe; / ** példa ** / p -webkit-text-stroke: 1px # 222;
Böngésző-kompatibilitás
Ha úgy érzi, hogy szükség van szöveges stroke effektekre, mindig tartalmaznia kell egy biztonsági másolatot. A Mozilla és az Opera is elérhető, de az Internet Explorer felhasználóinak nincs más lehetősége. Sajnos ez az egyik újabb CSS3 tulajdonság, amely éppen nem szerzett elég támogatást a webböngésző fejlesztői közösségétől. Egy kis időt kell töltenie ezzel a nagyszerű webes eszközzel, amelyet kifejezetten ezeknek a CSS3 szöveges vázlatoknak a létrehozására hoztak létre.
Box-méretezés
A dobozméret tulajdonsága nagyobb ellenőrzést nyújt a blokkelemek teljes szélessége / magassága felett. Alapértelmezés szerint a szélesség / magasság + szegély + margó + párnázás egy doboz teljes méretét teszi ki. Azonban a szegélydoboz használata a tartalomban megnyomja az összes párnázást és margót befelé hogy a szélesség pontosan ugyanaz legyen. Ennek a tulajdonságnak csak két értéke van content-box az alapértelmezett.
div szélesség: 550px; párnázás: 9px; doboz-méretezés: szegélydoboz; / * szélessége 550px * /
Ahogy elképzelheted, ez a CSS karrierje során hasznos lesz. A párnázás és a margók valódi fájdalom lehetnek, és amikor határokba helyezi, akkor elveszítheti a képpontok nyomon követését.
Böngésző-kompatibilitás
Az Opera és az IE 8 alapértelmezés szerint támogatja ezt az új tulajdonságot. Az IE7 és az alábbiak meg vannak ragadva a tartalmi mezőbe, hacsak a látogatók nem használnak quirks módot. Az egyetlen kiegészítés, amit tudnod kell a speciális webkit és a Mozilla-alapú böngészőmotorokról.
div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box méretezés: szegélydoboz; / * Firefox * / doboz-méretezés: szegélydoboz; / * Opera / IE8 + * /
Tiszta CSS3 oszlopok
Az oszlopok egy kicsit trükkösek a CSS3-hoz, de minimális kóddal érhetők el. A 2 tulajdonság, amelyre fókuszálni szeretne oszlop száma és oszlop-rés. A szám azt az oszlopot jelöli, amelyikre alkalmazni kívánja, míg a rés margót hoz létre mindegyik között.
div # cols oszlopszám: 3; oszlop-rés: 10px;
Példámban láthatjuk, hogy az ID #cols konténerként kerül felhasználásra. Belső részünkbe osztottuk a divot 3 oszlopra, amelyek között 10px különbség van. Továbbá beállíthatnád oszlop szélesség amely az egyes oszlopok teljes szélességének beállítására szolgál a szilárd szám felsorolása helyett.
Böngésző-kompatibilitás
Bármi, ami az IE8 előtt történik, egyszerűen nem tudja használni ezt a tulajdonságot. De ahogy minden példában láttuk, a Mozilla és a Webkit több böngésző számára kínál saját megoldásokat. Ha szüksége van egy sablonra, nézze meg az alábbi kis példakódot:
div # oldalsáv szélesség: 210px; -moz-column-count: 3; -moz-oszlop-rés: 7px; -webkit-column-count: 3; -webkit-oszlop-rés: 7px; oszlopszám: 3; oszlop-rés: 7px;
Egyéni @ betűtípus-arc
A CSS3 egyedi betűkészleteiről az izgalomról hallott. A @ betű-arc tulajdonság használatával külső betűtípusokat importálhatunk, és ezeket ugyanúgy használhatjuk, mint bármely más családot. A szintaxis kissé össze van csavarozva, és el kell töltenie egy kis időt, hogy helyes legyen. A blokk @ Font-face a családnév megadására szolgál, ezt követően használhatja ezt betűtípus család mindenhol!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Csak az Internet Explorer * / Így látod a fentieket, nem célozok semmiféle konkrét betűtípust, de a szintaxisnak ki kell állnia. Vegye figyelembe, hogy az Internet Explorer csak támogatja .eot betűtípusokat, míg .tTF és .OTF népszerű lehetőségek a többi böngésző számára. Szintén fontos, hogy meg kell értened, hogy a betűtípus URL-eket közvetlen linkekből, azaz. url ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');
Ezzel a beállítással nincs valós, böngészőnkénti probléma, mivel az összes megjelenítő motor elemezheti ezeket a betűtípusfájlokat. Ne feledje, hogy az IE támogatáshoz tartalmaznia kell egy eot verziót és az eredeti példányát is. Úgy érzem, hogy a W3 iskolai cikknek van egy listája a legfontosabb információkról, amelyeket érdemes megnézni.
Átalakítás miniatűr CSS-re
Ezt a témát gyakran megvitatják, mivel minden projekthez más célt szolgál. Egyrészt a webfejlesztők sok időt töltenek a stíluslapok írása során. Nem lehet titkosítani ezt a fajta egyszerű szöveges adatot és elrejteni azt a szaggatott szemektől. Ha megpróbálja megakadályozni, hogy mások elrettentően ellopják a kódot, akkor a legjobb, amit tehetünk, hogy elfojtsa a stílusokat és távolítsa el az összes sorszakadást / teret.
Ez a folyamat címkével jelölhető minimálisra kicsinyített a kódod. Általában a fejlesztők a CSS-t szabványos formátumban írják, majd az összes üres területet eltávolítják a webkiszolgálóra való feltöltés előtt. Ezután egy helyi másolatot gyorsan szerkeszthet, miközben kisebb változatot is biztosít az élő projektre. Ez a módszer nyilvánvalóan hasznos lehet az oldalak terhelésének csökkentésében, valamint a kódrepülőgépek őrzésénél.
A Minify CSS-hez vezetett link, amellyel a fent említettem, rettenetes olvasmányokat tartalmaz a témáról. A webhely böngészőalapú eszközt is biztosít az ilyen szóköz eltávolításához, és a kulcs visszatér a kódból. A CSS kompresszor egy másik lehetőség egy egyszerű felületen, amely közvetlenül a böngészőn fut. Jó dolgokat is hallottam a Clean CSS-ről, bár soha nem használtam magam az alkalmazást.
kapcsolódó linkek
Ahhoz, hogy továbblépjen, hat hasznos linket biztosítottam a webről. Ezek közé nemcsak a rövidített jelölés tartozik, hanem hasznos útmutatók és oktatóanyagok, amelyekhez az új rövidítésű CSS-kód gyakorlása során kell hozzáférni.
- Kezdő útmutató a CSS3-hoz
- CSS Shorthand Guide
- Ön megfelelően használja a CSS3-at?
- CSS tartalom és böngésző kompatibilitási táblázat
- CSS3 + progresszív fejlesztés = intelligens tervezés
- Teljes CSS / CSS3 tulajdonságok indexe
Következtetés
Nagyon sok elkötelezettségre és gyakorlatra van szükség, hogy a CSS kódot egy konkrét ütemtervhez hozza létre, amelyet minden projekt esetében követhet. A legtöbb webes tervező örömmel veszi fel az új projekteket és ötleteket, így biztosan megtalálja az időt a hasznos kódolási tippek gyakorlására. Próbáljon lemásolni egy kis referencialapot a saját kényelmére, ha nem talál csaló lapot, vagy még rosszabb az internetkapcsolat elvesztése!
Ismeri a CSS3 egyéb tulajdonságait vagy gyorsbillentyűit? Szeretnénk hallani a gondolatait és ötleteit a vitafórumban. A webfejlesztők a W3C-n belül több szabványosításra törekednek, és egyértelműen az átmenet könnyebbé vált. A CSS3 fantasztikus előnyöket nyújt, és ha el tudja fogadni a rövidített kódolást, akkor a fájlméretei alacsonyak lesznek, és megakadályozzák, hogy a másolatok ellopják a kódját.
