Keresés

Új hozzászólás Aktív témák

  • fordfairlane

    veterán

    válasz Zedz #1741 üzenetére

    Ami működik preprocesszorral, annál nincs igazán égető szükség, hogy a böngészőben is implementálva is legyen.

    x gon' give it to ya

  • DNReNTi

    őstag

    válasz Zedz #1741 üzenetére

    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. :D

    but without you, my life is incomplete, my days are absolutely gray

  • Sk8erPeter

    nagyúr

    válasz Zedz #1741 üzenetére

    "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 :D), 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.

    Sk8erPeter

Új hozzászólás Aktív témák