Udržování kódového značení CSS3 Slim
Weboví vývojáři mohou ušetřit spoustu času pomocí sofistikovanější syntaxe CSS3. Uživatelé, kteří navštíví vaši stránku, očekávají nejrychlejší možnou dobu načítání. Existuje spousta zkrácených triků s CSS a zejména pod novým modelem CSS3.
V níže uvedené příručce jsem uvedl několik těchto myšlenek. Měli bychom se také dotknout dalších oblastí, jako je například zhuštění kódu CSS. Pro vývojáře v procesu tvorby stylů jsou k dispozici nástroje v prohlížeči, ale chcete kombinovat zkrácené kódy s tímto zmenšením velikosti souboru, aby se konečně zefektivnil proces vykreslování webových stránek..
Základní tipy pro formátování
Než skočíme do skutečné syntaxe CSS, chci se věnovat tématu jak psát svůj CSS. Pokud jste trochu obeznámeni s web design, jste pravděpodobně viděli styl dříve, pravděpodobně více než jednou. První část každého příkazu se nazývá volič. To cílí na typ prvku, který obdrží styly přidané uvnitř složených závorek, také známý jako vlastnosti.
Inline Level
S inline styly je každá vlastnost zapsána jedna po druhé, kde jsou odděleny pouze mezery. Tato metoda se nejlépe aplikuje na selektory, kde potřebujete pouze několik vlastností. To vám ušetří místo na stránce a rolování přes váš styl bude mnohem rychlejší. V případě, že jste se nikdy předtím nesetkali s inline CSS, přidal jsem malý příklad níže, který cílí odkazy na kotvy HTML.
a barva: # 648cc8; font-weight: tučné; a: hover color: # 739cda; text-decoration: žádný; a.alt color: # bd4949! důležité;
Bloková úroveň
Na druhé straně jsou vlastnosti stylu bloků zadávány v jednom řádku na pár klíč / hodnota a často jsou odsazeny pro rychlejší úpravy při skenování kódu. Toto formátování používá asi 99% čistých stylů, které jsem použil, a stalo se standardem mnoha designérů. Pokud váš selektor používá více než 6 nebo 7 vlastností, je to nejvhodnější formátování.
Když vezmete v úvahu mnoho nových vlastností CSS3, uvědomíte si také, jak rychle se vaše styly vyplní. Mnohé z těchto vlastností podporují kopie specifické pro prohlížeč, které vyžadují téměř duplicitní kódové položky (například poloměr ohraničení). Můžete si prohlédnout můj příklad vlastnosti bloku, která je nastavena na cíl, zacílený na divizi ukázkového obalu.
.wrap display: block; polstrování: 6px 10px; pozadí: #FFF; hraniční rádius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;
Žádný způsob psaní CSS není konkrétně lepší než druhý. Nakonec je to vaše volba jako vývojář, kterému dáváte přednost, a to i podle projektu, na kterém pracujete. Je dokonce běžné najít CSS, kde se designéři spojili dohromady! Já osobně to cítím “probíhajících prací” mají tendenci být jednodušší s blokem-styly, protože jsem neustále zkoumá stylů, aby úpravy nebo dodatky. Ale pro domény s vysokou hustotou provozu je zhuštění souboru CSS naprosto nejlepším způsobem, jak jít.
Udržet je Slim
Využitím mnoha krátkých kódů dostupných v CSS3 můžete ušetřit spoustu času vývoje. Editace HTML elementů bude mnohem snazší, když pochopíte tento čas šetřící žargon. Váš kód se navíc bude zobrazovat čistěji a lépe se na něj dívá.
Jediná nevýhoda je, že ne všechny prohlížeče tyto vlastnosti plně podporují. Existují zástupná řešení mnoha existujících problémů, například v aplikaci Internet Explorer a Netscape. Naštěstí Web neustále postupuje vpřed a CSS3 roste v popularitě..
RGBa Barva Průhlednost / Opacity
Nový RGBavalue není přesně CSS3 vlastnictví, ale alfa průhlednost je specifická pouze pro CSS3. Namísto běžných hodnot "Červená zelená modrá" přecházíte pro barvu, kterou nyní můžete zahrnovat čtvrtou možnost průhlednosti barev. Z tohoto důvodu jsou weboví vývojáři prováděni s transparentními PNG téměř úplně.
Základní syntaxe vyžaduje hodnotu od 0-255 v prvních třech (3) slotech a 0-1,0 v pozici alfa. Rozsah barev je specifický pro to, kolik z každého odstínu (RGB) je viditelné, když 0 není nic a 255 plných.
/ ** syntaxe ** / background: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** příklad ** / div pozadí: rgba (255, 255, 255, 0,3);
Kompatibilita mezi prohlížeči
Další nemovitost neprůhlednost za určitých okolností. To však bude mít vliv na celý HTML element a vnitřní obsah, nejen na pozadí, jak jste viděli v mém příkladu.
Internet Explorer bohužel nepodporuje hodnotu barev RGBa. Obecně byste měli zahrnout záložní vlastnost s plnou krytí pro tyto méně standardní prohlížeče. Nastavíte to se stejnými hodnotami, ale vyjma 4. (opacity). Vypadalo by to něco jako rgba (255, 255, 255)
Internet Explorer může být navíc zpracováván o něco více ladně prostřednictvím podmínek. Můžete skutečně zkontrolovat, zda prohlížeč běží IE a zobrazit proprietární filtr Microsoft CSS na příkaz. Ukázali jsme to v níže uvedeném příkladu (poznámka by se objevila někde v souboru HTML):
CSS3 Hraniční poloměr
Přečetl jsem si několik matoucích diskusních fór o vytváření zaokrouhlených hranic pomocí CSS3 - ne tolik na straně toho, jak se to dělá, ale s výstižnou podporou prohlížeče se weboví vývojáři pokoušejí o nejjednodušší kód, který se má zapnout a fungovat podle očekávání..
/ ** syntaxe ** / hraniční rádius: horní levý horní pravý dolní pravý dolní pravý dolní levý;
poloměr ohraničení vlastnost sdílí podobnou syntaxi s vytvořením standardního ohraničení, kromě tohoto případu cílíme na rohy pole. Tato vlastnost bude ve skutečnosti přijímat hodnoty 1 - 4 a každá z nich bude zaměřena na jiné nastavení rohů.
- 1 hodnota: Všechny čtyři rohy jsou zaokrouhleny na stejnou hodnotu
- 2 hodnoty: První hodnota platí pro
vlevo nahořeavpravo dolezatímco druhá hodnota udeřívpravo nahořeavlevo dole - 3 hodnoty: Nejprve platí pro
vlevo nahoředruhé je obojívlevo dole&vpravo nahořezatímco je aplikována třetí a konečná hodnotavpravo dole - 4 hodnoty: Všechny 4 hodnoty cílí rohy v následujícím pořadí: vlevo nahoře, vpravo nahoře, vpravo dole, vlevo dole
/ ** příklad ** / div border-radius: 4px 4px 8px 4px; div hraniční rádius: 4px 4px 8px;
Takže ve výše uvedeném kódu používáme poloměr ohraničení použít zaokrouhlení 4px na všechno kromě vpravo dole hranicí, která získá 8px vyhlazenou křivku. Pokud jste si to všimli, oba tyto kódy budou skutečně aplikovat stejný styl efekt.
Kompatibilita mezi prohlížeči
Teď je to hlavní problém poloměr ohraničení je podporován pouze v několika prohlížečích. Internet Explorer 9 nedávno přidal velkou podporu a Opera to také vykreslí. Ale i Opera vytvořila svůj vlastní majetek -o-border-radius cílení na jejich konkrétní prohlížeč. dodatečně -moz-border-radius je podporován softwarem Firefox / Gecko a -webkit-border-radius pro Google Chrome / Safari.
Níže uvedený kód je příkladem mé šablony holé kosti pro vytvoření zaoblených rohů s největší podporou globálního prohlížeče.
div hraniční rádius: 4px 4px 8px 4px; -webk-hraniční rádius: 4px 4px 8px 4px; -moz-hraniční rádius: 4px 4px 8px 4px; -o-hraniční rádius: 4px 4px 8px 4px;
Fancy Shrop Shadow?
Dalším opravdu úžasným aspektem CSS3 je podpora box a textové stíny. Pro vývojáře to byl takový problém v minulosti, protože obrázky na pozadí byly jedinou realistickou možností. Tato syntaxe ve skutečnosti následuje zkrácenou roli, která je mnohem jednodušší než ostatní vlastnosti, které jsme pokryli. Je těžké si pamatovat na správné pořadí klíčových hodnot zpočátku - ale čím více praxe vložíte, tím snadnější bude.
Internet Explorer je bohužel opět zvláštní. Každý další hlavní prohlížeč včetně Firefoxu, Google Chrome, Safari a Opery plně podporuje textového stínu vlastnictví. Vývojáři se snažili vybudovat vlastní podporu IE, ale stále jsou velmi omezující. Základní syntaxe je zapsána následovně:
/ ** syntaxe ** / text-shadow: x-offset y-ofsetový barevný odstín; / ** příklad ** / div text-shadow: 2px 2px 1px # 111;
Odsazení X a Y informuje prohlížeč, jak daleko by se měl objevit stín. Záporné hodnoty můžete použít pro umístění stínu nad a po levé straně. Ale to přijde vypadají velmi trapné, takže doporučuji pozitivní celá čísla. Rovnoměrnost rozostření lze také použít k vyhlazení tuhých hran, pokud se stín textu jeví jako nepřirozený.
Tato syntaxe se pouze při pohledu na základní zápis při vytváření efektu jediného stínového stínu. Vysoce pokročilí designéři studovali, aby dokonce vytvořili více stínů současně! Odkazuji na tento úžasný blogový příspěvek od dubna 2011, který jde do detailů o impozantních textových stínech. Pokud máte čas, projděte si obsah, abyste získali představu o pokročilejších funkcích, a nezapomeňte si jej označit jako budoucí odkaz!
Kompatibilita mezi prohlížeči
Největším kritikem, do kterého jsme narazili, je Internet Explorer. Znovu a znovu Microsoft vytlačil svůj vlastní prohlížeč vykreslování engine, který provedl sub-par v nejlepším případě. I když je CSS3 s vládnutím v textových stínu, IE je stále pozadu. Tam je velký demo webové stránky, kde můžete najít příklady kódu a tradiční CSS podmíněné komentáře.
V podstatě chcete zkontrolovat, zda prohlížeč, ve kterém je uživatel spuštěn, odpovídá jakékoli verzi aplikace Internet Explorer 9 nebo nižší. Potom pomocí filtrů MS můžeme aplikovat stín na libovolný textový prvek (výše, používáme odstavec).
Usnadnění přechodů
CSS3 přechod je nejžhavější nemovitost na designovém trhu od babiččiny flapjacků! Weboví designéři dělají takový povyk o čistých přechodech CSS, i když podpora je omezena hlavně na prohlížeče Webkit. Samozřejmě můžete využít i sekundární vlastnosti pro Mozillu a Opera a podobně. Ale zkrácená notace je opravdu okouzlující, zvláště pokud jste z nějakého důvodu proti animacím JavaScriptu.
Nejprve se podívejme na původní vlastnost přechodu. To bude vyžadovat 4 hodnoty, které byste také mohli rozdělit na vlastnosti samotné. Odpovídají přechodu vlastnictví(jaký je účinek), doba trvání(jak dlouho to bude trvat), funkce časování(změny v rychlosti nad animací) a zpoždění(počet vteřin čekání před animací).
/ ** syntaxe ** / přechod: doba trvání funkce časování-zpoždění funkce; / ** příklad ** / img vlastnost přechod: opacity; doba přechodu: 2s; funkce časování přechodu: easy-in; přechodové zpoždění: 0,5s;
Měli byste intuitivně porozumět účelu většiny těchto vlastností s výjimkou případné funkce časování. I když je tato vlastnost zpočátku matoucí, jednoduše animuje váš přechod jinak, takže efekt začne pomaleji, pomaleji, nebo něco podobného..
W3 Školy mají časovací funkci doc online, která uvádí všechny možné hodnoty, které si můžete vyzkoušet. Stále jsem se ocitl Googling pro tyto příručky, ale oni dělají takové šikovné záložky.
Kompatibilita mezi prohlížeči
Nyní přiveďme do hry plnou podporu prohlížeče. Vlastnost přechodu je standardně pouze podporovány novějšími verzemi Safari. Přesto mnoho uživatelů stále vyžaduje -webkit předpona, která platí i pro prohlížeče Google Chrome a podobné vykreslovací nástroje. Níže je a “dokončena” Šablona kódového bloku Doporučuji ukládat a používat, pokud potřebujete podporu přechodu z většiny webových prohlížečů.
img transition: opacity 2s easy-in 1s; -webkit-transition: opacity 2s easy-in 1s; / * chrome, safari, flock * / -moz-transition: opacity 2s easy-in 1s; / * mozilla + gecko * / -o-transition: opacity 2s easy-in 1s; / * opera * /
Efekty tahu textu
Tato vlastnost není obrovská a nenajdete mnoho webových designérů, kteří ji používají dnes. Ale můžete použít text-mrtvice budovat některé opravdu elegantní efekty s vašimi fonty. Prohlížeče Webkit jako Safari a Chrome jsou doposud jedinými příznivci této vlastnosti. Opera a Firefox mají potíže s vykreslováním textových objektů s těmito stejnými obrysy.
/ ** syntaxe ** / p -webkit-text-lift: width color; / ** příklad ** / p -webkit-text-mrtvice: 1px # 222;
Kompatibilita mezi prohlížeči
Pokud cítíte potřebu efektů tahu textu, měli byste vždy zahrnout barvu zálohy. Mozilla a Opera se mohou dostat, ale uživatelé aplikace Internet Explorer nemají jiné možnosti. Je to bohužel jedna z novějších vlastností CSS3, která nemá dostatek podpory od komunity vývojářů webového prohlížeče. Měli byste strávit nějaký čas hraním s tímto skvělým webovým nástrojem speciálně vytvořeným pro vytváření těchto textových obrysů CSS3.
Box-velikosti
Vlastnost velikost pole vám dává větší kontrolu nad celkovou šířkou / výškou jakéhokoliv prvku bloku. Standardně šířka / výška + okraj + okraj + vycpávka tvoří celkovou velikost pole. Nicméně použití rámečku na vašem obsahu posouvá všechny vaše výplně a okraje vnitřní aby byla šířka přesně stejná. Pro tuto vlastnost existují pouze dvě hodnoty obsah výchozí.
div width: 550px; polstrování: 9px; velikost krabice: rámeček; / * šířka zůstane na 550px * /
Jak si dokážete představit, bude to vhodné v určitém okamžiku během vaší CSS kariéry. Výplň a okraje mohou být skutečnou bolestí a když přidáte hranice, ztratíte přehled o pixelech.
Kompatibilita mezi prohlížeči
Opera a IE 8 tuto novou vlastnost standardně podporují. IE7 a níže jsou uvízlé v nastavení obsahu, pokud návštěvníci nepoužívají režim quirks. Jediné dodatky, které byste měli vědět o specifických cílových webkit a prohlížečích Mozilla.
div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: rámeček; / * Firefox * / box-sizing: rámeček; / * Opera / IE8 + * /
Pure CSS3 Sloupce
Sloupce jsou s CSS3 trochu složitější, ale lze je provést s minimálním kódem. Dvě vlastnosti, na které se chcete zaměřit, jsou počet sloupců a mezera mezi sloupci. Počítadlo odkazuje na celkový počet sloupců, které chcete použít, zatímco mezera mezi nimi vytváří okraj.
div # cols počet sloupců: 3; mezera ve sloupci: 10px;
V mém příkladu vidíme ID #cols používané jako kontejner. Uvnitř jsme rozdělili div na 3 sloupce s 10px mezerou mezi nimi. Dále byste mohli nastavit šířka sloupce který slouží k nastavení celkové šířky každého sloupce namísto výpisu pevného čísla.
Kompatibilita mezi prohlížeči
Cokoliv před IE8 prostě nebude moci tuto vlastnost využít. Jak jsme však viděli v každém příkladu, Mozilla a Webkit nabízejí vlastní řešení pro více prohlížečů. Pokud potřebujete šablonu, podívejte se na níže uvedený malý příklad kódu:
div # sidebar width: 210px; -moz-sloupec-počet: 3; -moz-sloupec-mezera: 7px; -webkit-column-count: 3; -webk-sloupec-mezera: 7px; počet sloupců: 3; mezera ve sloupci: 7px;
Vlastní @ font-face
Museli jste slyšet o vzrušení ohledně vlastních fontů CSS3. Pomocí vlastnosti @ font-face můžeme importovat externí styly písma a používat je stejně jako každá jiná rodina. Syntaxe je poněkud spletitá a budete muset strávit nějaký čas, aby to bylo správné. Blok pro @ font-face se používá k definování příjmení, poté jej můžete použít ve svém font-family vlastnosti!
@ font-face rodina fontů: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Pouze Internet Explorer * / Takže vidíte výše Nejsem cílení na konkrétní typ písma, ale syntaxe je to, co by mělo vyniknout. Všimněte si, že aplikace Internet Explorer podporuje pouze .eot typy písma, zatímco .ttf a .otf jsou populární možnosti pro ostatní prohlížeče. Také důležité je, abyste pochopili, že můžete předávat adresy URL písem z přímých odkazů, tj. url ('https://www.hongkiat.com/css3/fonts/myfont.ttf');
S tímto nastavením neexistuje žádný skutečný problém s různými prohlížeči, protože všechny vykreslovací nástroje mohou tyto typy souborů písem analyzovat. Jen nezapomeňte, že pro IE podporu musíte zahrnout eot verzi, stejně jako váš originál. Mám pocit, že článek W3 Schools obsahuje katalog nejdůležitějších informací, které byste měli vyzkoušet.
Převedení na miniaturní CSS
Toto téma je často diskutováno, protože pro každý projekt slouží jinému účelu. Na jedné straně weboví vývojáři tráví spoustu času psaním svých stylů. Neexistuje žádný způsob, jak šifrovat tento typ dat z prostého textu a skrýt je před snooping očima. Pokud se snažíte udržet ostatní od nehorázného krádeže kódu, můžete to nejlepší, co můžete udělat, je zmařit styly a odstranit všechny konce řádků nebo mezery.
Tento proces může být označen jako miniaturizace kód. Obecně vývojáři budou psát CSS ve standardním formátu a pak odstranit všechny mezery před nahráváním na webový server. Pak máte lokální kopii, kterou můžete rychle upravovat a zároveň poskytovat menší verzi na živém projektu. Tato metoda může být samozřejmě užitečná pro snížení zatížení stránky spolu s udržováním únosců kódu na uzdě.
Odkaz, který jsem napsal výše, vedoucí k Minify CSS, má na toto téma nějaký úžasný materiál pro čtení. Web také poskytuje prohlížečový nástroj pro odstranění takových mezer a návratu klíče z vašeho kódu. CSS Compressor je další možností sportovního jednoduchého rozhraní, které běží přímo ve vašem webovém prohlížeči. Také jsem slyšel dobré věci o Clean CSS, i když jsem nikdy aplikaci nepoužíval sám.
související odkazy
Abych vás tlačil vpřed, poskytl jsem šest praktických odkazů z celého webu. Patří mezi ně nejen zkrácený zápis, ale i užitečné návody a návody k přístupu při praktikování tohoto nového zkratkového kódu CSS.
- Průvodce pro začátečníky k CSS3
- CSS zkratkový průvodce
- Používáte CSS3 správně?
- Obsah CSS a graf kompatibility prohlížeče
- CSS3 + Progresivní vylepšení = Smart Design
- Kompletní CSS / CSS3 Vlastnosti Index
Závěr
To vyžaduje hodně věnování a praxe psaní CSS kód vybudovat konkrétní plán, který můžete sledovat pro každý projekt. Většina webových designérů ráda vyzvedne nové projekty a nápady, takže určitě najdete čas na procvičení těchto užitečných tipů pro kódování. Vyzkoušejte kopírování malého referenčního listu pro vlastní pohodlí v případě, že nenajdete žádné podvody, nebo ještě horší ztratíte připojení k internetu!
Znáte nějaké další užitečné funkce nebo zkratky CSS3? Rádi bychom slyšeli vaše myšlenky a myšlenky v diskusních komentářích. Weboví vývojáři vyvíjejí snahu o větší standardizaci v rámci W3C a přechod je snadnější. CSS3 poskytuje fantastické výhody a pokud můžete zvládnout zkrácené kódování, bude vaše velikost souborů nízká a odradí kopie od krádeže kódu.
