Puțin despre eCSStender

Ultimul articol apărut pe A List Apart tratează problema extensiilor CSS3 dependente de browser. În articol se specifică în mod express border-radius, dar în aceeași categorie intră și alte chestii cool apărute în ultima vreme prin specificațiile CSS: opacity, box-shadow, text-shadow, rgba() și altele (selectori CSS3).

Aaron, autorul articolului, argumentează – pe bună dreptate – absurditatea folosirii unui cod de forma:

.this-is-absurd {
  border-radius: 10px 5px;
  -moz-border-radius: 10px 5px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 5px;
  -o-border-radius: 10px 5px;
  -khtml-border-top-left-radius: 10px;
  -khtml-border-top-right-radius: 5px;
  -khtml-border-bottom-right-radius: 10px;
  -khtml-border-bottom-left-radius: 5px;
}

Nu știu dacă sunt lucruri mai absurde în CSS decât repetarea codului, astfel încât fiecare browser să înțeleagă ce i se zice.

Soluția salvatoare!

Soluția stă în… produsul autorului, desigur! Pe numele de scenă eCSStender. Toate bune și frumoase până la un punct: punctul în care trebuie să-l folosești. :D

Pentru că:

  • Are vreo 10kb;
  • Nu prea face nimic de capul lui, de fapt. Are nevoie de plugin-uri (2-3-4kb fiecare) și de un selector engine. Cum ar fi.. Sizzle (da, cel din jQuery);
  • Cum sunt șanse maxime să încarci tot jQuery, nu doar Sizzle, mai adaugi vreo 20kb;

Cei 10+20kb precizați sunt valabili doar dacă ai gzip activat pe server ;)

De ce nu ai folosi eCSStender (cu tot cu plugin-uri)?

  • eCSStender.CSS3-selectors.js este plugin-ul care ar putea promite cel mai mult. Dacă nu ar ocupa 7kb pentru… Nimic. Nu știu alții cum sunt, dar eu prefer fie să adaug o clasă manual pentru cine nu suportă (IE6) selectori avansați, fie să le adaug din jQuery.
  • eCSStender.CSS3-color.js mi se pare cel mai util, mai ales că este 50% funcțional (poți folosi rgba() doar pentru backgrounds. Oricum, între a folosi plugin-ul și a folosi soluția asta, parcă aș alege varianta a doua…
  • eCSStender.CSS3-backgrounds-and-borders.js ar fi fost super. Dacă ar merge. Dar înlocuiește bucata de cod de care am povestit mai sus cu:
    (function(){
            if ( typeof eCSStender == undefined ){ return; }
            var e = eCSStender;
            e.disableCache();
            e.register(
              { 'fragment': 'radius',
                'test':     function()
                {
                  return ( ! e.isSupported( 'property', 'border-top-left-radius: 3px' ) &&
                           ( e.isSupported( 'property', '-moz-border-radius-topleft: 3px' ) ||
                             e.isSupported( 'property', '-webkit-border-bottom-left-radius: 3px' ) ||
                             e.isSupported( 'property', '-khtml-border-bottom-left-radius: 3px' ) ) );
                },
                'fingerprint': 'net.easy-designs.border-radius'
              },
              false,
              function( selector, properties, medium ){
                var style_block = selector + ' { ';
    
                // mozilla currently messes up the individual assignment, so we need to manage that
                var transpose = false;
                if ( e.isSupported( 'property', '-moz-border-radius-topleft: 3px' ) )
                {
                  transpose = true;
                }
    
                // shorthand
                if ( typeof( properties['border-radius'] ) != 'undefined' )
                {
                  // handle radii or just plain old corners
                  var
                  radii = properties['border-radius'].split('/'),
                  corners = [];
                  if ( radii.length > 1 )
                  {
                    var horiz = e.trim( radii[0] ).split(' ');
                    var vert  = e.trim( radii[1] ).split(' ');
                    // handle mirroring
                    if ( horiz.length < 4 )
                    {
                      if ( typeof( horiz&#91;1&#93; ) == 'undefined' ){ horiz&#91;1&#93; = horiz&#91;0&#93;; }
                      if ( typeof( horiz&#91;2&#93; ) == 'undefined' ){ horiz&#91;2&#93; = horiz&#91;0&#93;; }
                      if ( typeof( horiz&#91;3&#93; ) == 'undefined' ){ horiz&#91;3&#93; = horiz&#91;1&#93;; }
                    }
                    if ( vert.length < 4 )
                    {
                      if ( typeof( vert&#91;1&#93; ) == 'undefined' ){ vert&#91;1&#93; = vert&#91;0&#93;; }
                      if ( typeof( vert&#91;2&#93; ) == 'undefined' ){ vert&#91;2&#93; = vert&#91;0&#93;; }
                      if ( typeof( vert&#91;3&#93; ) == 'undefined' ){ vert&#91;3&#93; = vert&#91;1&#93;; }
                    }
                    // some browsers can't handle compund radii yet
                    var compound = true;
                    if ( ! e.isSupported( 'property', '-webkit-border-bottom-left-radius: 3px 3px' ) &&
                         ! e.isSupported( 'property', '-moz-border-radius-bottomleft: 3px 3px' ) &&
                         ! e.isSupported( 'property', '-khtml-border-bottom-left-radius: 3px 3px' ) )
                    {
                      compound = false;
                    }
                    for ( var i=0; i<4; i++ )
                    {
                      corners&#91;i&#93; = compound ? horiz&#91;i&#93; + ' ' + vert&#91;i&#93; : horiz&#91;i&#93;;
                    }
                  }
                  else
                  {
                    corners = properties&#91;'border-radius'&#93;.split(' ');
                  }
                  if ( corners.length > 1 )
                  {
                    // webkit/konquerer is a little funky with multiple-assignment
                    if ( e.isSupported( 'property', '-webkit-border-bottom-left-radius: 3px' ) ||
                         e.isSupported( 'property', '-khtml-border-bottom-left-radius: 3px' ) )
                    {
                      style_block += '-webkit-border-top-left-radius: ' + corners[0] + '; ' +
                                     '-webkit-border-top-right-radius: ' + corners[1] + '; ' +
                                     '-webkit-border-bottom-right-radius: ' + corners[2] + '; ' +
                                     '-webkit-border-bottom-left-radius: ' + corners[3] + '; ' +
                                     '-khtml-border-top-left-radius: ' + corners[0] + '; ' +
                                     '-khtml-border-top-right-radius: ' + corners[1] + '; ' +
                                     '-khtml-border-bottom-right-radius: ' + corners[2] + '; ' +
                                     '-khtml-border-bottom-left-radius: ' + corners[3] + '; ';
                    }
                    else
                    {
                      style_block += '-moz-border-radius-topleft: ' + corners[0] + '; ' +
                                     '-moz-border-radius-topright: ' + corners[1] + '; ' +
                                     '-moz-border-radius-bottomright: ' + corners[2] + '; ' +
                                     '-moz-border-radius-bottomleft: ' + corners[3] + '; ';
                    }
                  }
                  else
                  {
                    style_block += '-moz-border-radius: ' + properties['border-radius'] + '; ' +
                                   '-webkit-border-radius: ' + properties['border-radius'] + '; ' +
                                   '-khtml-border-radius: ' + properties['border-radius'] + '; ';
                  }
                  properties['border-radius'] = null;
                }
    
                for ( var prop in properties )
                {
                  if ( e.isInheritedProperty( properties, prop ) ) { continue; };
                  if ( transpose )
                  {
                    style_block += prop.replace( /border-(top|bottom)-(left|right)-radius/, '-moz-border-radius-$1$2' ) +
                                   ': ' + properties[prop] + '; ';
                  }
                  else
                  {
                    style_block += prop + ': ' + properties[prop] + '; ';
                  }
                }
                style_block += '} ';
                e.embedCSS( style_block, medium );
              }
            );        
          })();
    

    Acum, să-mi fie cu iertare, dar eu prefer să adaug o clasă suplimentară pentru fiecare border-radius (dacă îl folosesc mai mult de o dată)…

De ce ai folosi eCSStender?

Singurul motiv bun pe care îl văd în momentul de față este că vei avea un cod mai curat și valid. Dar având în vedere că site-urile se optimizează și pentru accesul prin conexiuni mai slabe (cum ar fi GPRS), mă îndoiesc că validarea este un criteriu atât de important.

Alternativa

O alternativă la eCSStender, dar axată doar pe IE, de „doar” 40kb, ar fi ie7

4 Comentarii to “Puțin despre eCSStender”

  1. In linii mari sunt doar “temporary fixes” pe care nu te poti baza cu adevarat si sunt (sau, vor fi) folosite deoarece dezvoltatorului ii este lene sa mai adauge niste clase, mark-up in plus sau cateva hack-uri clasice (ma refer aici la IE). Cu timpul si prin urmare cu evolutia browserelor css-ul va deveni mai curat.
    Chestia aceea de ie7.js este chiar sinistra. Prefer sa incarc jq si/sau jqui si apoi sa fac fixurile in el daca nu sunt in stare sa aplic niste hack-uri clasice documentate peste tot pe Google…

  2. Mereu trebuie sa faci compromisuri. Dar poate ca (inca) eCSStender nu merita…

  3. Si eu prefer sa adaug o clasa in plus, mai ales ca nici nu e nevoie sa scrii chiar atat.

    .round{
    -moz-border-radius: 10px 5px;
    -khtml-border-radius: 10px 5px;
    border-radius: 10px 5px;
    }
    

    Asta e suficient.

  4. Staicu Ionuț-Bogdan

    Si eu prefer sa adaug o clasa in plus, mai ales ca nici nu e nevoie sa scrii chiar atat.

    Nope, nu e chiar așa. Safari (parcă) turtește colțurile dacă nu specifici în mod express ce radius are. Detalii.

    Asta așa, că tot vorbeam de vendor specific shits :D

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter