NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Prečo prehliadače nečítajú priamo LESS/SASS?

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Lava
Člen
Avatar
Lava:13.2.2020 10:45

Tak ma minule napadlo, prečo prehliadače nevedia priamo čítať LESS/SASS? A my by sme nemuseli riešiť kompilaciu a pod?

Zkusil jsem: -

Chci docílit: -

Odpovědět
13.2.2020 10:45
Aspartám, sacharín, to je môj vitamín
Avatar
Mirek Slouka
Člen
Avatar
Odpovídá na Lava
Mirek Slouka:13.2.2020 11:37

Protože LESS/SASS jsou jen preprocessory, které ti přidávají syntaktické cukrátka pro usnadnění vývoje, které v CSS nejsou. Např. proměnné, mixin, atd...

Nahoru Odpovědět
13.2.2020 11:37
I can explain it to you, but I can't understand it for you.
Avatar
krepsy3
Tvůrce
Avatar
krepsy3:13.2.2020 12:13

CSS je nějakým způsobem vyvíjené, a jedná se defacto pouze o sadu stylovacích pravidel, která si prohlížeč načte a interpretuje. Prohlížeče jsou stavěné na interpretování těchto pravidel a vykreslení dotčených elementů.

Nejsou stavěné na kompilaci preprocessorů, kterých nevíc může existovat nepřeberné množství, zatímco CSS je nějakým způsobem centralizované. V podstatě "si každý může naprogramovat svůj preprocessor", protože se opravdu jedná jen o způsob, jak si ulehčit práci s obyč CSS.

A k té kompilaci - prováděla by se pokaždé, když by uživatel načetl novou stránku. Vzhledem k tomu, že je možné dosáhnout v preprocessorech jisté rekurentnosti - styl, ten obsahuje proměnnou na jiný styl, ten zase atd., není možné snadno říci, že by kompilace probíhala dostatečně rychle. A šlo by tímpádem o tak zbytečné plýtvání výkonem.

U obyč CSS je rychlost jasná - prohlížeč má svá defaultní pravidla pro všechny tagy, co zná - načte CSS - tím pouze pro danou instanci "přepíše" vybraná pravidla (tzn. ta, která dané CSSko obsahuje) - vykreslí elementy na základě pravidel.

Jo, a chtěl jsem dát like komentáři výše, ale bohužel mi postižený ITNetwork přidělil -2 zkušenosti. Sorry, Mirku, napsal jsi výborný komentář, ale mohu ti to jen takto říci.

Nahoru Odpovědět
13.2.2020 12:13
Programátor je stroj k převodu kávy na kód.
Avatar
Lava
Člen
Avatar
Odpovídá na krepsy3
Lava:13.2.2020 13:20

Jasne, takto som nad tym nerozmyšlal. Ja len zato, že dnes už je LESS/SASS kvazi default, málokto robí raw CSS a preto by to podľa mňa mohli prehliadače "zožrať" aj priamo, jasne, trebalo by im prekodiť engines.
Čo sa týka rýchlosti, podľa mňa to problém nebude, veď premenné máš aj v iných jazykoch a zvládajú to rýchlo riešiť ako server, tak aj browser. Ked maš javascriptove appky (kadejake vue, a angulary a reakty a node a backbone a nwm čo všetko, tak je tam plno premenných a prehliadače zvladaju to riešiť ;) )
V konečnom dôsledku sa aj tak všetko prejavuje tak, že či má byť na tranzistore číslo 35434543844745 báza otvorená, alebo zatvorená :D

Nahoru Odpovědět
13.2.2020 13:20
Aspartám, sacharín, to je môj vitamín
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:13.2.2020 15:28

Nevim. Zeptej se Firefoxu :)
Co pisou kluci, nejsou duvody. JS se take nacte jako soubor jen jednou a dal se kesuje. Takze neni problem nacist pseudoCSS, kesovat a kesovat si i z nej generovany CSS.

Nejvic se mi ted zamlouva kesovani js pomoci checkintegrity
https://developer.mozilla.org/…ce_Integrity

<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

On si pri prvnim ulozeni js ulozi hash. A pokud v jakemkoliv kodu na jakekoliv strance je stejna url a stejny hash, ani se nepokousi nacitat obsah. Kdezto u normalniho kesovani to cas od casu maze a navic kesuje zvlast pro stranky.
Cili, to je naprosto idealni pro takove veci jako stejne verze jquery a pod.

PS. Ja zminoval uz pred 10 lety nekolik zpusobu na jakpsatwebu. A tehdy mi to moderatori smetly jako nesmysl. Ze je to sice pekne, ale do css3 to neprojde :)

Editováno 13.2.2020 15:30
 
Nahoru Odpovědět
13.2.2020 15:28
Avatar
Lava
Člen
Avatar
Lava:13.2.2020 20:08

Ale stale sa tu bavime o nejakej kompilacii na css. Ja mam na mysli nieco ine - css by v podstate prestalo existovat. Browsre by citali a vykreslovali rovno less/sass

Nahoru Odpovědět
13.2.2020 20:08
Aspartám, sacharín, to je môj vitamín
Avatar
Milan Turyna
Tvůrce
Avatar
Milan Turyna:13.2.2020 20:46

Muj nazor je ze by to v budoucnu mohlo byt uzitecne ale zatim to je nepotrebne jako prvni duvod ze to jeste tak velka cast nepouziva aby se vyvojari usmyslili ze takovou velkou zmenu udelaji a za dalsi by to udelalo problemy pro uzivatele ktery nemaji nejnovejsi verze prohlizecu, muzou si nainstalovat sice nejnovejsi verzi, ale kdo by to chtel delat ze.

Nahoru Odpovědět
13.2.2020 20:46
Řeš pouze to, co dokážeš ovlivnit.
Avatar
Lava
Člen
Avatar
Odpovídá na Milan Turyna
Lava:14.2.2020 8:10

To áno... možno raz...
Zas na druhej strane je pravda, že kadekto môže použiť vlastný kompilátor, alebo písať raw CSS, ja ho napr. raw píšem do wordpressu.

Nahoru Odpovědět
14.2.2020 8:10
Aspartám, sacharín, to je môj vitamín
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:14.2.2020 8:40

Ja v kompilaci css, kde se jedna o proste text-replace, nevidim zadne zpomaleni. Proto zminuji ten js, ktery se tez kompiluje predem.
Ja obvykle potrebuji menit jen barevnou paletu, pripadne vymenit loga pro 5 ruznych oddeleni ve firme. Tak, kdyz budu mit definovane nejake variables, tak mi to staci. Neco na zpusob:

@vars {
x {#f00;}
y {#0f0;}
red {color:#f00;}
}

.nav ul li a {color:@x;}

Ale to v podstate ma vyreseny bootstrap spesl classy pro barvy. text-warning, text-error, text-success a takove podobne. Cili, proste barevnym a menicim prvkum pridat class a problem je solved :)

 
Nahoru Odpovědět
14.2.2020 8:40
Avatar
Jindřich Máca
Tvůrce
Avatar
Jindřich Máca:14.2.2020 9:56

Jenom malinko doplním:

:root {
    --x: #f00;
    --y: #0f0;
}

.red {
    color: #f00;
}

.nav ul li a {
    color: var(--x);
}

Tohle by byla obdoba v čistém CSS. ;-)
A prohlížečová podpora už není tak špatná - https://caniuse.com/#…

 
Nahoru Odpovědět
14.2.2020 9:56
Avatar
Lava
Člen
Avatar
Odpovídá na Jindřich Máca
Lava:14.2.2020 10:31

Fakt už dačo take existuje? :) To som ani nevedel.

Stretol som sa ale aj s tým, že bolo style.php a týpek si tam definoval farby normalne ako PHP premenne a na zaver printol veľky skrumaž CSSka do súboru style.css

Nahoru Odpovědět
14.2.2020 10:31
Aspartám, sacharín, to je môj vitamín
Avatar
Jindřich Máca
Tvůrce
Avatar
Odpovídá na Lava
Jindřich Máca:14.2.2020 11:01

Jo, už to chvíli existuje (https://developer.mozilla.org/…m_properties), ale ta podpora se zlepšila až tak v posledních dvou letech... :)

Nicméně, jak sám píšeš, hodnoty se dají do CSS dostat všemožnými způsoby. :D

 
Nahoru Odpovědět
14.2.2020 11:01
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 12 zpráv z 12.