Klávesové zkratky na tomto webu - rozšířené Na obsah stránky

CSSX

| Webdesign

Tento člán je pouze spekulativní, píšu ho, abych si utřídil myšlenky a rozvedl jeden možná úplně blbý nápad.

Jak tak pročítám weblůžky narazil jsem na dva články: What I’m missing in CSS a Parametrizované CSS. A uvědomil jsem si, že podpoře lepšího psaní CSS, nebo spíš jeho použitelnosti a usnadnění práce kodérů, se moc pozornosti nevěnuje.

Rozhodl jsem se, že bych mohl napsat vlastní preprocesor pro asp.net, který rozšíří syntaxi CSS o některé nové možnosti, ale zůstane zpětně kompatibilní s lexikálními pravidly CSS. Preprocesor by měl také umožňovat komprimaci stylopisu, jak textovou, tak GZip. Měl by umět slučovat importované stylopisy a snížit tak počet http požadavků. Dále cachování a další nezbytnosti. :)

Proměnné

Prvním vylepšením CSSX jsou proměnné, které se definují na začátku dokumentu (kvůli lepší přehlednosti). Deklarace proměnné začíná zavináčovým pravidlem @var následuje název proměnné začínající na znak dolaru, např. $firemni-modra následuje dvojtečka a přiřazená hodnota. Deklaraci uzavírá středník. V praxi to může vypadat třeba následovně:

/* definice proměnných */
@var $firemni-modra: #2465B7;
@var $firemni-zelena: #A0B424;

a{color:$firemni-modra;}
a:hover{color:$firemni-zelena;}

/* další pravidla… */

V syntaxi využívám lexikální pravidla CSS, např. to, že neznámá zavináčová pravidla jsou ignorována až k následujícímu středníku nebo se ignoruje následující blok uzavřený ve složených závorkách.

Podmínky

Podmínky slouží k definování podmíněného bloku pravidel. Podmínky se definují pomocí zavináčového pravidla @if následovaného symbolem a blokem s definicemi:

@if IE6 {
/* pravidla pouze pro IE6 */
}

@if BLUE {
/* pravidla pro pozadavek  style.cssx?symbols=blue */
}

Symboly jsou definovány jednak pomocí „browser caps“ z asp.net a druhak pomocí GET parametru symbols. Podmínky jsou proto vhodné pro validní hackování stylopisu pro určité prohlížeče nebo pro skinování. Užití určitě může být povícero.

Pokud máte další nápady na rozšíření nebo vylepšení mých návrhů, klidně to písněte do komentářů, diskusi se nebráním. :)

Našli jste v článku chybu? Máte námět na reportáž? Založte mi ticket.