Új hozzászólás Aktív témák
-
Sk8erPeter
nagyúr
"A kódmennyiséggel kapcsolatos felvetésed nem teljesen értem. [...] Szóval igazából a felhasználó ebből mit sem érzékel, hisz úgy is csak a kész .css fájlt kapja meg, amit akkor is megkapna ha mi azt "natívan" kódoljuk le."
Itt a felhasználó annyiból kerül képbe, hogy mennyi adatot kell letöltenie, és az általa használt böngészőnek mennyi időbe kerül feldolgozni a betöltött kódot. Ez például mobileszközöknél nem (sem) mindegy. Szóval így van, úgyis csak a kész CSS-fájlt kapja meg, hiszen azt előre legenerálod a SASS/LESS/...-kódodból. Viszont nem mindegy, hogy ebből a kódból mekkora legenerált kódbázis keletkezik: előfordul olyan eset, hogy míg Te egy darab sort írsz az adott kódblokkba pl. SASS+Compass segítségével, addig a legenerált CSS-kód már fog tartalmazni vagy 10 vagy több (!) sort, ami ebből az 1-ből keletkezett. Ez több letöltendő és feldolgozandó adat.
Csak egy kicsit talán túlzottan is extrém példa (most épp ez akadt a kezembe), ami mondjuk annyiból sántít, hogy a Compass a SASS-hoz képest is bővebb, szimplán csak összehasonlítás kedvéért, hogy a mennyiséggel kapcsolatos érvet alátámasszam:
http://compass-style.org/examples/compass/tables/striping/SCSS:
@import "compass/utilities/tables/alternating-rows-and-columns";
.example {
table {
$table-color: #7a98c6;
@include alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222222);
}
}az ebből keletkező CSS-kód:
.example table th {
background-color: white;
}
.example table th.even, .example table th:nth-child(2n) {
background-color: #dddddd;
}
.example table tr.odd td, .example table tr:nth-child(2n+1) td {
background-color: #98c67a;
}
.example table tr.odd td.even, .example table tr.odd td:nth-child(2n), .example table tr:nth-child(2n+1) td.even, .example table tr:nth-child(2n+1) td:nth-child(2n) {
background-color: #76a458;
}
.example table tr.even td {
background-color: #7a98c6;
}
.example table tr.even td.even, .example table tr.even td:nth-child(2n) {
background-color: #5876a4;
}
.example table tfoot th, .example table tfoot td {
background-color: white;
}
.example table tfoot th.even, .example table tfoot th:nth-child(2n), .example table tfoot td.even, .example table tfoot td:nth-child(2n) {
background-color: #dddddd;
}De mondjuk bevallom, ez tényleg túl extrém példa.
De ha a böngésződ natívan támogatna olyan lehetőségeket, amiket eddig csak preprocessorral tudtál kényelmesen elérni (anélkül, hogy a kódod átláthatatlan lett volna, mert például ebben is nagy segítséget nyújtanak ezek az eszközök), akkor az mindenképp egy jobb irány.
-
DNReNTi
őstag
A preprocessorok a a lehető leginkább crossbrowser kimenetet adnak, tele van fallback-ekkel, és böngészőspecifikus prefixekkel, hogy korábbi böngészők is elboldoguljanak az eredménnyal. Csak egy példa ami a Sass "dokumentációban" is szerepel:
Amit te CSS-el elintéznél ennyivel:
.box { border-radius: 10px; }Annak a SASS kimenete ez lesz:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}Ilyenek miatt még a minimalizált CSS kimenet is nagyobb lesz mint amit te amúgy bekottáznál. Szvsz ez egyébként nem probléma. Tegye má' fel a kezét aki mindezekre a prefixekre figyel mikor kottát ír.
Új hozzászólás Aktív témák
- Mégsem búcsúznak a DDR4-es memóriák
- One mobilszolgáltatások
- Crypto Trade
- Kodi és kiegészítői magyar nyelvű online tartalmakhoz (Linux, Windows)
- Videós, mozgóképes topik
- Házimozi belépő szinten
- World of Tanks - MMO
- Világ Ninjái és Kódfejtői, egyesüljetek!
- Hardcore café
- Bittorrent topik
- További aktív témák...
- LG 27GS95QE - 27" OLED / QHD 2K / 240Hz & 0.03ms / 1000 Nits / NVIDIA G-Sync / AMD FreeSync
- Jo Nesbo: LEOPÁRD (nem olvasott)
- Samsung Galaxy A32 4G 128GB, Kártyafüggetlen, 1 Év Garanciával
- Telefon felvásárlás!! Honor 200 Lite, Honor 200, Honor 200 Pro, Honor 200 Smart
- Csere-Beszámítás! Playstation 5 Slim Digital edition! OLVASS!
Állásajánlatok
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest