css – adrian.silimon

Design-ul adaptabil/receptiv (en. responsive design) este o tehnică propusă Ethan Marcotte în 2010. Dacă nu ați prins încă valul, pe scurt înseamnă design adaptabil la ecranul utilizatorului. Astfel de exemplu dacă vizitatorul are o rezoluție de 1366×768 pagina se va afișa la 100%, iar dacă acesta are o rezoluție de 854×480 se va afișa la 76%. Ceea ce vreau să scot în evidență aici e că nu se afișează 76% din pagină ci o versiune optimizată a paginii pentru rezoluția respectivă.

Desigur dacă mărimea fonturilor sau a elementului cu rol de container este foarte ușor de controlat (prin procente) unele elemente (imagini, bara de navigare) sunt mai greu de optimizat, însă este posibil. Iar cheia acestor optimizări pentru diverse rezoluții sunt css media queries.

Puteți verifica această tehnică pe următoarele saituri prin redimensionarea ferestrei navigatorului:

După cum observați paginile își mențin aspectul general și cel mai important caracteristicile de accesibilitate. Asta e unul dintre motivele pentru care a fost adoptată această tehnică – pentru a păstra accesibilitatea pe o arie cât mai largă de device-uri.

Așa că dacă până acum aveam o versiune redusă, mobilă (gen m.sait.com) pe lângă cea desktop a saitului, și toată lumea părea mulțumită, această abordare nu mai este viabilă. Asta pentru că PC-urile și smartphone-urile nu mai sunt singurele device-uri capabile să navigheze pe internet. Avem console de jocuri (PS3, PS Vita), ultrabook-uri, tablete PC și chiar și televizoare cu rezoluții foarte mari. Desigur, menținerea unei versiuni separate optimizate pentru fiecare clasă de device-uri în parte ar consuma foarte multe resurse iar răspunsul este implementarea unui design adaptabil.

Tabele ascultătoare:

Se poate întâmpla, și se întâmplă ca unele tabele să devină ”obraznice”! Adică iei un tabel de pe o pagină, îl muți pe altă pagină, și deși are aceleași stiluri și dimensiuni, nu le mai respectă și se dimensionează după bunul plac. Dacă ai o imagine în background, sau chenare în jurul celulelor tabelului, rezultatul este un tabel urât. Bine că asta poate fi rezolvată cu o singură linie de CSS:

 table{ 
   table-layout: fixed; /*display tables as defined, no fancy browser layout*/ 
 }

table{

table-layout: fixed; /*display tables as defined, no fancy browser layout*/

}

Reguli de CSS3 cu măsură:

CSS3 devine din ce în ce mai popular. E foarte bine, numai că unii designeri le aplică fără să-și dea seama că au intrat pe teritoriul CSS3 și suportul din partea navigatoarelor este limitat sau chiar lipsește cu desăvârșire. Acum chiar dacă folosiți HTML5 Shiv sau Modernizr și poți aplica css3 în marea majoritate a browserelor s-ar putea să observi că unele stiluri sunt randate diferit. Un exemplu este text-shadow, astfel următorul stil va afișa textul diferit în webkit (Safari + Chrome), Firefox și Internet Explorer 9:

 #Content .box h2{
     text-shadow:#CCC 1pt 1pt 2pt, #222 -1pt -1pt 2pt, #DDD -1pt -1pt 2pt;
 }

#Content .box h2{

text-shadow:#CCC 1pt 1pt 2pt, #222 -1pt -1pt 2pt, #DDD -1pt -1pt 2pt;

}

Problema nu ar trebui să fie că am 3 umbre, le-am pus pentru a obține un anumit efect. Și nu e. Problema e că specificațiile CSS3 nu sunt încă definitive, și fiecare grup de dezvoltatori le implementează independent. Asta nu e o surpriză, stați liniștiți, și cu CSS2 au făcut la fel, deși specificațiile erau oficiale – nu am uitat de buclucașul IE, și implementarea box-model în Opera. Dar cu toate astea siturile nu au încetat să fie mai atrăgătoare.
Dar să revin la problemă, cum am spus de regula de mai sus, în Chrome efectul se aplică aproape bine. În IE 9, umbrele abia se văd, dar textul e lizibil. Spre deosebire în Firefox ultima umbră se vede exagerat de mare și face textul aproape ilizibil, oricum prea încețoșat.
Deci am nevoie de un stil special care să se aplice pentru Firefox, pentru IE oricum aveam deja unul aplicat de comentarii condiționale .
Ca să rezolv problema am apelat la jQuery, mai exact la metoda jQuery.browser. Acestă metodă javascript e simplă dar îmi permite să aplic un set de reguli diferit în funcție de navigator. Deci am următorul cod:

 var browserName = null;
 jQuery.each(jQuery.browser, function(i, val) {
    browserName = i; return false;
 });

 jQuery(document).ready(function(){ 
    jQuery('body').addClass(browserName);

    ...
  });

var browserName = null;

jQuery.each(jQuery.browser, function(i, val) {

browserName = i; return false;

});

jQuery(document).ready(function(){

jQuery('body').addClass(browserName);

...

});

Acesta mai adaugă o clasă în plus la elementul body, care indică navigatorul. După încărcarea paginii cu Firefox body-ul va arăta așa:

 <body class="mozilla"> 
   ...
 </body>

...

</body>

Și pot aplica un stil specific pentru Firefox, ca să fac textul lizibil și să păstrez efectul, astfel:

 body.mozilla #Content .box h2{
    text-shadow:#CCC 1pt 1pt 2pt, #666 0pt -1pt 0.4pt;
 }

body.mozilla #Content .box h2{

text-shadow:#CCC 1pt 1pt 2pt, #666 0pt -1pt 0.4pt;

}

Folosind aceeași tehnică pot aplica stiluri specifice și pentru alte navigatoare. De asemenea codul poate fi extins să notifice și versiunea sau localizarea (limba) navigatorului.

Etichetă: css

De ce design-ul adaptiv e important

Șmecherii de CSS + jQuery