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.

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[1] ) == 'undefined' ){ horiz[1] = horiz[0]; }
                    if ( typeof( horiz[2] ) == 'undefined' ){ horiz[2] = horiz[0]; }
                    if ( typeof( horiz[3] ) == 'undefined' ){ horiz[3] = horiz[1]; }
                  }
                  if ( vert.length < 4 )
                  {
                    if ( typeof( vert[1] ) == 'undefined' ){ vert[1] = vert[0]; }
                    if ( typeof( vert[2] ) == 'undefined' ){ vert[2] = vert[0]; }
                    if ( typeof( vert[3] ) == 'undefined' ){ vert[3] = vert[1]; }
                  }
                  // 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[i] = compound ? horiz[i] + ' ' + vert[i] : horiz[i];
                  }
                }
                else
                {
                  corners = properties['border-radius'].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