Komprese souborů php gzip. Jakou metodu komprese bych měl v PHP použít? GZIP je nejlepší kompresní metoda

V tomto článku si povíme o možnostech Méně preprocesoru, kterou kvůli nějakým neznámým silám téměř nikdo nepoužívá. Kromě toho si povíme o chybějících funkcích a pokusíme se je přidat.

Navrhuji začít malou připomínkou toho, co nedělat, i když opravdu chcete. Podívejte se na framework Alesya, který byl vyvinut kamarádem, který učí Less ostatní lidi. Zkuste se podívat zblízka na soubor ./core/functions.less . I když ne, nesledujte odkaz, jen se podívejte na snímek obrazovky malé části tohoto souboru. Když jsem to viděl poprvé, byl jsem jednoduše v šoku.

Důvodem je, že cykly jsou velmi pomalé, v důsledku toho se rychlost překladu Less v CSS snižuje a doba překladu se zvyšuje. Pentium 4? Bez urážky, ale je to frustrující.

Uvedu úryvek z knihy „HTML5 for Web Designers“ od Jeremyho Keitha, který se nedávno stal hrdinou veřejných stránek na VK:

Předpokládejme, že na světě existuje zlé monstrum, které nenávidí internet a všechny uživatele internetu. Tomuto pánovi je pravděpodobně jedno, že vložení zvukového souboru na stránku, která se začne automaticky přehrávat, je neuvěřitelně neslušné a hloupé. Pomocí atributu autoplay můžete uspokojit jeho hluboce zlé touhy.

Pokud někdy takto použijete atribut autoplay, vězte, že si vás najdu.

Pokud tedy používáte i Less, vězte, že už vás hledají a brzy najdou.

Rozšíření voliče

Máme průtokový jistič typický pro naši dobu:

Clearfix ( &:before, &:after ( content: " "; display: table; ) &:after ( clear: both; ) )

A nějaký selektor, který implikuje použití clearfix. Samozřejmě můžete použít .clearfix jako příměs a všude vyrobit obrovské množství nepotřebných věcí, ale požadovaný kód. Tomu se však můžete vyhnout použitím rozšíření voliče.

Například takto:

Navbar ( &:extend(.clearfix all); ... ) .navbar-collapse ( &:extend(.clearfix all); ... ) .ad ( &:extend(.clearfix all); ... )

Výsledkem je, že naše class.clearfix začne komunikovat s přáteli z různé části vaše styly, aniž byste s kýmkoli sdíleli další řádky kódu:

Clearfix:before, .clearfix:after, .navbar:before, .navbar:after, .navbar-collapse:before, .navbar-collapse:after, .ad:before, .ad:after ( content: " "; zobrazit: tabulka ) .clearfix:after, .navbar:after, .navbar-collapse:after, .ad:after ( clear: both; )

Samozřejmě byste toho neměli zneužívat. Abych byl upřímný, radím vám, abyste rozšíření selektoru používali pouze pro clearfix a v případech, kdy platí pravidlo: "No, to je opravdu nutné, nemůžu nic dělat, jinak to bude horší." Při manipulaci se styly prvků byste neměli používat rozšíření selektoru. Nejčastější a nejhloupější chyba:

Třída ( barva: #fff; pozadí: #fff; ) .new-class ( &:extend(.class); ) // .class, // .new-class ( // barva: #fff; // pozadí: #fff; // )

To nemůžeš. To je hloupé. Jako mix je lepší použít .class:

Třída ( barva: #fff; pozadí: #fff; ) .new-class ( .class; ) // .class ( // barva: #fff; // pozadí: #fff; // ) // .new-class ( // barva: #fff; // pozadí: #fff; // )

Pamatujte si to!

Možnosti importu

Podívejte se prosím do sekce dokumentace "možnosti importní směrnice".

jen dám stručný popis nejdůležitější z těchto parametrů:

odkaz

Umožňuje používat soubory .less, ale nezobrazovat jejich obsah bez výslovného volání. Velmi užitečný parametr, pokud používáte Bootstrap jako knihovnu a ne framework, to znamená:

@import (reference) "bower_components/bootstrap/less/bootstrap"; .my-alert ( .alert; )

Použití tohoto parametru umožňuje zahrnout soubory bez přípony .less. Parametr není vyžadován, protože vše bude fungovat i bez něj, ale pokud máte rádi pořádek, bude se hodit. Tento parametr lze použít při připojování souborů s jinou příponou než .less, například .variables, .mixins.

Musíte to aplikovat takto:

@import (klíčové slovo) "název souboru";

S podrobný popis a příklady lze nalézt na stránkách dokumentace. Takže zdvořile posílám vás, můj čtenáři, abyste si přečetli dokumentaci. Nezapomenutelný zážitek :)

Podmínky

Méně má kondicionály. Ano, ve srovnání s jinými preprocesory nejsou plnohodnotné, ale přesto jejich přítomnost nemůže než jásat. Připadají mi ještě pohodlnější než @if v Sass, i když v tom není žádný praktický rozdíl.

Mixin(@proměnná) ( & když (@proměnná = 1) ( obsah: "PRAVDA" ) & když ne (@proměnná = 1) ( obsah: "NEPRAVDA" ) .class-test ( .mixin(1); . mixin (2)

V důsledku toho získáme následující CSS:

Třídní test ( obsah: "PRAVDA"; obsah: "NEPRAVDA"; )

Co se právě stalo? Kouzlo?

Vlastně ne. Klíčové slovo když zde nahrazuje obvyklé if ve všech programovacích jazycích a má pouze dva logická brána: ne - negace, a - prostě a a je to, nic víc tam není. Nemůžu s tím udělat nic extra skvělého, ale používám podmíněný operátor aby se nevytvářely extra kód. Jednou z takových situací je například vlastnost border-radius v generátoru stylu tlačítka. Proč by se při generování ještě jednou specifikovala nějaká vlastnost, když její hodnota nehraje roli (0)? - Správně, není třeba.

Interpolace proměnných

V Less je zajímavý design, když získáme hodnotu jedné proměnné v závislosti na ostatních.

// Proměnné @clr-grey-100: #fafafa; @clr-grey-200: #f5f5f5; @clr-red-100: #ffebee; @clr-red-200: #ffcdd2; .mixin(@color, @temperature: 500) (color: ~"@(clr-@(color)-@(temperature))"; background: e("@(clr-@(color)-@(temperature)) )"); ) .class-test ( .mixin(šedá, 100); &-test ( .mixin(červená, 200); ) )

Tento příklad volá mixin, jehož parametry jsou barva ( @barva) a jeho teplota ( @teplota). Dále shromáždíme všechny proměnné do jedné, tedy zjednodušeně řečeno zkonstruujeme novou proměnnou a získáme její hodnotu. Proces, kdy se řetězec, relativně vzato, změní na volání proměnné, je interpolace proměnných.

Všimněte si, že v tomto příkladu používáme složená rovnátka po psovi - to je velmi důležité.

výstup:

Class-test ( barva: #fafafa; pozadí: #fafafa; ) .class-test-test ( barva: #ffcdd2; pozadí: #ffcdd2; )

Mimochodem, nemohl jsem to najít v Sass a Stylus. Možná by mi to mohl říct pozorný čtenář? :)

Cykly

Mnoho přívrženců Sass preprocesory a Stylus trvají na tom, že Less nemá žádné smyčky, ale nějaké jsou, i když ne stejné jako všichni ostatní. Jen je nepohodlné je používat.

Řekněme, že máme seznam barev:

@list-red: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c;

Vytvořme například třídu pro každou barvu:

Generátor barev (@index: 1, @color) když (@index .submit; )

Řetězcová interpolace Řetězcová interpolace je další módní slovo, které znamená toto libovolný řetězec lze uložit do proměnné a poté použít v hodnotě vlastnosti.

@url: "http://mycompany.com/assets/";obrazek-pozadi: url("@(url)/sprite.png");
To může být užitečné při vytváření centralizovaného rámce.

Escapování Někdy je potřeba použít vlastnosti nebo hodnoty, které nejsou platnými CSS (pravidla IE). Možná jste si všimli, že v příkladu o přechodech jsem se nestaral o uživatele Internet Exploreru.
Pokud chcete vytvořit přechod v IE, měli byste udělat něco takového:

Filtr: progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444");
Tento CSS není platný, takže LESS se nezkompiluje. V tomto případě můžete tuto hodnotu ukončit, což umožní LESS ji přeskočit.

Tlačítko ( pozadí: -webkit-gradient(lineární, vlevo nahoře, vlevo dole, from(#666666), to(#444444)); background: -moz-linear-gradient(top, #666666, @color - #444444) ; filtr: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444")";)
Vše, co musíte udělat, je dát sekci do uvozovek a před ni dát vlnovku. Tato sekce neprojde procesorem LESS a nebude vyřazena.

Import Stejně jako u běžných CSS můžete importovat soubory. LESS umožňuje importovat CSS a LESS pomocí následující syntaxe:

@import "reset.min.css"; @import "framework.less"; @import "widgety";
První import je zcela zřejmý. Dováží se CSS pravidla definované v reset.min.css, aniž by je zpracoval analyzátor LESS.
Druhý import vloží obsah framework.less a bude s ním zacházet jako s ostatními pravidly LESS.
Třetí import funguje stejně jako druhý. Pokud rozšíření není nainstalováno, preprocesor to zváží MÉNĚ souboru ohm

Komentáře Samozřejmě, víceřádkové komentáře jsou dostupné v LESS stejným způsobem jako v CSS. LESS také umožňuje použití jednořádkových komentářů jako v PHP nebo Javascriptu pomocí dvojitých zpětných lomítek.

/* Toto je můj hlavní soubor LESS.

Řídí, jak vypadá většina webu. /* body ( padding:0px; // Toto resetuje odsazení těla )
co chybí? I když je LESS úžasný, stále existují určité nedostatky, když jej začnete používat, i když nejsou příliš rušivé.

Jednou z funkcí, kterou bych rád viděl, je předběžné zpracování (souhlasím, zní to nesmyslně). Současná metoda neumožňuje použití přechodů s proměnlivými barvami.
Tento kód funguje skvěle, ale barvy musí být přesně definovány. Pokud je řádek escapován, pak se proměnné nezpracovávají. Bylo by hezké mít možnost, kde jsou proměnné v uvozených řetězcích zpracovány před odesláním do souboru CSS.

Závěr Jako každý nová technologie nebo se metoda zneužije. Pamatujete si na reflexní loga a skleněná tlačítka na úsvitu éry Webu 2.0?
Nemusíte vnořovat všechna svá pravidla, nemusíte vytvářet proměnné pro všechno nebo mix pouze pro šířku rámce.
Pokud nevíte, kdy nevyužít úžasnou sílu LESS, váš kód LESS se stane nečitelným jako běžné CSS a stejně tak náročný na údržbu. Trik je vědět, kdy použít tyto funkce a metody a kdy použít obvyklé staré CSS lepší.
Kromě toho nedoporučuji používat soubor LESS. Není na tom nic špatného, ​​ale není důvod načítat MÉNĚ souboru a zpracovávat ho. Scénář je bezesporu velmi rychlý, ale jsem si jistý, že bez něj bude rychlejší. Obvykle vyvíjím všechny své stránky pomocí LESS, vezmu výstupní soubor, komprimuji jej a používám běžný soubor CSS.

CSS je jednoduchý jazyk. Umožňuje nám nastavit styly pro HTML prvky pomocí selektorů. Je to snadné i pro začátečníky.

Postupem času však může velikost vašeho webového projektu narůstat a vy skončíte se spoustou duplicitních CSS kódu. Pokud čelíte tomuto problému, pak je čas použít preprocesor CSS.

V tomto tutoriálu vysvětlíme, co je to preprocesor CSS, a podíváme se na jeden z nejpopulárnějších: LESS.

Co je preprocesor CSS?

CSS preprocesory nenahrazují CSS. Ve skutečnosti nám preprocesory jednoduše poskytují další funkčnost, jako jsou proměnné, operátory a funkce, pomocí kterých si můžeme usnadnit vytváření a správu CSS souborů.

Preprocesory nám umožňují definovat vlastnosti jednou a poté je znovu použít v našem projektu, který je mnohem funkčnější než jednoduchý css nemůže udělat.

Co je LESS?

LESS je relativně nový preprocesor, asi 4 roky starý. Často je přirovnáván k SASS, staršímu preprocesoru. LESS i SASS mají své kořeny v jazyce Ruby programování, ale nyní se používají mnohem více. LESS je nyní založen na Javascriptu.

Lidé používající LESS mohou pro svůj web vytvořit předdefinovanou sadu barev. Mohou definovat konkrétní styl jednou a poté jej znovu použít, kdekoli je potřeba.

Pomocí LESS

Abychom mohli využít toho, co LESS nabízí, musíme nejprve uložit náš CSS kód do souboru s příponou .méně. LESS se velmi snadno používá. Běží jak na straně webového serveru, tak na straně klienta.

Tato metoda funguje pouze v moderní prohlížeče a je vhodný pouze pro použití na lokální server. Produkční stránka vyžaduje předkompilaci pomocí Node na webovém serveru nebo různé nástroje od výrobců třetích stran.

Některé z nástrojů třetích stran:

• a mnoho dalších...

LESS Syntaxe: Proměnné

Jednou z věcí, která se v souboru CSS často opakuje, jsou barvy. Stejné barvy se opakují CSS soubory Pro různé prvky, názvy, odkazy atd.

#header (
barva pozadí: #CCCCCC
}
.stranou (
barva pozadí : #CCCCCC ;
barva : #000000 ;
.postranní panel a(
border-bottom : 1px solid #CCCCCC ;
}

V LESS můžeme jednoduše deklarovat proměnnou pro uložení barvy, jako je tato:

@grey: #CCCCCC;

A pak to znovu použijte takto:

#header (
background-color : @grey;
}
.stranou (
background-color : @grey;
barva : #000000 ;
}
.postranní panel a(
border-bottom : 1px solid @grey;
}

Můžeme také použít proměnné k uložení dalších vlastností, jako je šířka, výška, velikost písma a mnoho dalších hodnot, které plánujete znovu použít na různých místech stylu.

LESS Syntaxe: Mixins

Proměnné jsou užitečné pro znovu použít individuální hodnoty, jako je barva, velikost písma. V LESS s mixiny můžeme použít sadu vlastností z jednoho nebo více pravidel. Mixiny lze použít například k definování stylu ohraničení, velikosti písma atd.

border_top_bottom(
border-top : tečkovaný 1px #000 ;
border-bottom : solid 2px #000 ;
}

Ve výše uvedeném kódu jsme definovali horní a dolní hranici uvnitř třídy border_top_bottom. Nyní, když chceme tyto styly přidat k dalším prvkům, můžeme je použít takto:

#header (
barva : #000000 ;
.border_top_bottom;
}
.obsah a(
barva : #000000 ;
.border_top_bottom;
}

Výše uvedený kód vypíše následující:

#header (
barva : #000000 ;

}
.obsah a(
barva : #000000 ;
border-top : tečkovaný 1px #000000 ;
border-bottom : solid 2px #000000 ;
}

Abychom přidali větší flexibilitu, mixiny nám také umožní předávat proměnné (zde nazývané parametry). Například:

Border-radius (@radius: 5px) (
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

Ve výše uvedeném příkladu jsme zadali parametr pro poloměr. Také jsme mu dali výchozí hodnotu 5px, což je volitelné. Nyní to chceme přidat do třídy tlačítka:

Tlačítko (
.border-radius(6px) ;
}

Pokud z výše uvedeného příkladu odebereme 6px, bude poloměr okraje nastaven na výchozí hodnotu, která je určena v naší třídě border-radius a je 5px.

LESS Syntaxe: Nesting

Jednou z věcí běžných v CSS jsou dlouhé selektory, které často musíme zapsat do podřízených prvků stylu:

nav ( )
navli ( )
nav li a ( )
nav li a:hover ( )
navli a.active ( )
nav li a.navštívené ( )

A pokud máte více podúrovní rozbalovací nabídky, bude to obtížnější pochopit. V LESS to lze zapsat jako:

nav(
li(
a (
& :hover ( )
& :aktivní ( )
& :navštívil ( )
}
}
}

Znak "&" se v naší vnořené struktuře používá před pseudotřídami. Výše popsaný návrh je mnohem srozumitelnější a zobrazuje hierarchii přesně takovou, jaká je.

LESS Syntaxe: Operace

LESS nám také umožňuje provádět operace, jako je sčítání, odčítání, násobení a dělení číselných hodnot, barev a proměnných v šabloně stylů. Řekněme, že jsme deklarovali proměnnou vycpávka, což platí pro všechny naše prvky H1. Ale teď chceme přidat další vycpávky pro naši hlavičku domovskou stránku. Můžeme to udělat takto:

@padding: 5px;
h1 (
vycpávka : @vycpávka;
}
h1.page-title (
padding : (@padding * 2);
}

Výchozí hodnota se vynásobí 2, což dá výplň záhlaví hlavní stránky rovna 10px. Operace musí být prováděny v závorkách, ale mohou fungovat i bez závorek.

LESS Syntaxe: Rozsah

Rozsah v LESS je podobný rozsahu v jiných programovacích jazycích. Proměnné a mixiny se nejprve hledají na lokální úrovni, a pokud nejsou nalezeny, pak je kompilátor vyhledá v nadřazeném rozsahu a tak dále.

@var:red;

#stránka (
@var:bílá;

#header (
barva : @var; // vytiskne bíle
}
}
#patička (
barva : @var; // vytiskne červeně
}

Závěr

Tento článek nepokrývá vše, co LESS nabízí. Cílem je vysvětlit, jak nám pomocí LESS může pomoci udělat naše CSS dynamičtější. CSS preprocesory nám umožňují vytvářet a spravovat CSS efektivněji. I při dobré znalosti CSS nám LESS umožní používat jej produktivněji.

Pokud máte nějaké dotazy, doporučujeme použít náš