Probabil CSS3 este cea mai mare tendință în web design, permițînt dezvoltatorilor posibilitatea de a pune în aplicare o serie de soluții în proiectele lor doar cu CSS, evitînd să utilizeze markup non-standard, imagini suplimentare și a procedurilor complexe în JavaScript. Din păcate, nu este o surpriză că Internet Explorer, chiar și în versiunea sa cea mai recentă, încă nu suportă majoritatea proprietăților și caracteristicile introduse în CSS3.

Doar dezvoltatorii se confruntă cu faptul că clienții insistă asupra faptului cross-browser utilizînd soluțiile CSS3, cerînd punerea lor în aplicare, chiar și în IE6. În acest caz, am colectat o serie de opțiuni care dezvoltatorii pot lua în considerare atunci cînd se lucrează în aceste condiții, atunci cînd sprijinul CSS3 este necesar în toate versiunile de Internet Explorer (IE6, IE7, IE8 – toate au un număr semnificativ de utilizatori).

Opacity / Transparency

Probabil, că toți dezvoltatorii sunt uimiți de faptul ca Internet Explorer încă nu acceptă aceastră populară proprietate(deși e problematic). Aceasta este ulitilizată peste tot atît de mult timp că toți au uitat că, de fapt este proprietatea din CSS3. Deși nu suportă propietatea opacity, el ne oferă efect asemănator cu ajutorul proprietății lui filter:

Sintaxacode.png printer.png info.gif 
  1. #myElement {
  2.     opacity: .4; /* Alte browsere */
  3.     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* Funcționează în IE6, IE7, și IE8 */
  4.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* Functionează numai în IE8 */
  5. }

Defapt aveți nevoie doar a doua linie, care lucrează în toate cele trei versiuni de Internet Explorer.  Dar dacă dintr-un motiv trebuie folosiți transparența numai în IE8, va trebuie doar linia a treia, pe care versiunile mai vechi nu recunosc.

Valoarea opacity care este la sfîrșitul fiecărei linie pentru IE, lucrează ca și opacity luînd un număr de la 0-100(proprietatea opacity se un numar între 0 – 1 . De exemplu “44″  pentru IE este echivalent cu  “0.44 ” pentru alte browsere ). Proprietatea opacity va fi moștenită de toți copii, ceea ce poate să ne ducă în eroare.

Demonstrație

Acest element are culoarea de fundal albastra (#0000FF), dar cu opacity 60%

Același element fara proprietatea opacity

Dezavantaje
  • Proprietatea filter este folosită doar în produsele Microsoft, ceea ce face ca CSS -ul sa nu treacă validarea
  • Ca și în cazul folosirii opacity , valoarea proprietății filter IE este moștenită de toții copii.
Rounded Corners (border-radius)

Proprietatea border-radius (des întîlnită în CSS3 ca colțuri rotunjite) – altă prorietate populară în CSS3. Această proprietate a permis dezvoltatorilor să evite scriputuri în JavaScript sau poziționarea de elemnte suplimentar pentru a atinge acest efect. Dar încă o dată, Microsoft nu vrea să coopereze, astfel IE nu suportă această proprietate.

Din fericire, cel puțin o persoană a venit cu o soluție foarte utilă. Remiz Rahnas a creat un fişier de HTC care este numit colţuri rotunjite (îl puteți descărca de pe Google Code)

Cel mai mare lucru despre această bucată de cod este că nu necesită întreținere din partea dvs. Trebuie doar linkul către CSS și scriptul va analiza automat codul CSS, pentru a găsi proprietatea border-radius.

Codul va arăta cam asa:

Sintaxăcode.png printer.png info.gif 

.box-radius {     border-radius: 15px;     behavior: url(border-radius.htc); }

În mod ideal, utilizați proprieatea behavior doar ăn foia de stil pentru IE, folosînd aceeși selectori în CSS, astfel script-ul va prelua volorile razelor
.

Demonstrație

Avînd în vedere că tehnica necesită utilizarea unui fișier HTC extern, demonstrația poate fi gasită aici (pagina trebuie să fie deschisă în IE).

Dezavantaje
  • fișierul HTC are 142 de linii de cod(minimizarea sau arhivarea pot ajuta, dar nu elimină problema complet)
  • proprietatea behavior face ca CSS-ul sa nu fie validat
  • serverul dvs. trebuie sa poată încărca fișierul HTC pentru a utiliza această tehnologie
  • se pare că IE8 are aceeși problemă atunci cînd se utilizează fișierul HTC elemente cu colțuri rotunjite, care au valoarea negativă la proprietatea z-index
Shadow Box

Proprietatea box-shadow este o altă proprietate utilă din CSS3, care va adăuga elementului o umbră naturală. IE nu acceptă propietatea box-shadow, dar proprietatea filter oferă o alternativă decentă.

Trebuie remarcat faptul că proprietatea box-shadow a fost  scoată din Backgrounds CSS3 şi Module Borders astfel încît nu se știe viitorul în prezent.

Sintaxăcode.png printer.png info.gif .box-shadow {
    -moz-box-shadow: 2px 2px 3px #969696; /* pentru Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 3px #969696; /*pentru Safari и Chrome */
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
} Demonstrație

Acest element are umbră care functionează în Internet Explorer.

Dezavantaje
  • Setările pentru umbră în IE nu corespunde cu proprietatea box-shadow. Pentru ca să arate la fel, trebuie să vă jucați cu volorile care poate provoca dureri de cap.
  • Proprietatea filter nu este validată , dar nici proprietățile webkit și Mozilla, astfel încît aceasta este un neajuns la toate browserele
Text Shadow

Adăugarea umbră la etichetele text în design și paginele web se practică de mulți ani. În web design de obicei problema este rezolvată prin imagini sau duplarea textului și pozitionarea lui. CSS3 oferă dezvoltatorilor un mod simplu de a adăuga umbre la text, cu o proprietate simplă și flexibilă text-shadow.

Din păcate, adăugînd o umbră la text în Internet Explorer nu este un proces simplu, chiar și cu folosirea unui filtru. Pentru a rezolva aceastră problemă există un plugin jQuery scris de un web designer Kilian Valkhof
În primul rînd trebuie în CSS să setați proprietatea text-shadow:

Sintaxăcode.png printer.png info.gif .text-shadow {
text-shadow: #aaa 1px 1px 1px;
}

Valorile specifică culoarea umbrei, poziția pe axa orizontală, poziția pe axa verticală și gradul de neclaritate.
După conectarea bibliotecii jQuery și a plugin-ului, dumneavoastră puteți apela cu jQuery plugin-ul:
Sintaxăcode.png printer.png info.gif // include bliblioteca jQuery
// include link la plugin
$(document).ready(function(){
$(".text-shadow").textShadow();
});
Plugin-ul vă permite să utilizați opțiunie

Demonstrație

Deoarece această tehnică necesită utilizarea bibliotecii jQuery și un plugin extern, puteți vedea o demonstrație aici

Dezavantaje
  • Pentru ca umbrele să arate asemănător in toate browserele, trebuie să utilizați setări doar pentru IE, adăugînd la timpul de dezvoltare și întreținere
  • Trebuie de conectat bibliotica jQuery, plus plugin-ul care are 61 de linii
  • Umbra în IE nu va arata exact ca în celelalte browsere
  • Utilizarea parametrilor pentru plugin care modifică valorile proprietăților în CSS, plugin-ul nu funcționează corect, afișarea umbrelor este urităi
  • Spre deosebire de CSS3, plugin-ul nu suportă mai multe umbre
  • Indiferent de motive, în scopul ca în IE sa lureze este nevoie elementul de dat proprietatea z-index
Gradients

Createa unui gradient pentru fundal este o tehnică excelentă în CSS3, care ajută la scutirea timpului de dezvoltare. Deși Internet Explorer nu suține proprietatea din CSS3, se face foarte ușor folosind o sintaxă specifică.

Sintaxăcode.png printer.png info.gif 
  1. #gradient {
  2.     background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
  3.     background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
  4.     filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
  5.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
  6. }

Pentru IE GradientType poate avea valori “1″(orizontal) sau “0″(vertical).

Demonstrație Acest element are un gradient liniar, care funcționează în Internet Explorer. Dezavantaje
  • CSS-ul nu va trece validarea, de asemenea și WebKit și Mozilla
  • Cod suplimentar pentru IE, care crește timpul de dezvoltare
  • Gradientul WebKit și Mozilla va permite să declarați un stops, care nu este posibil în IE
Transparent Background Colors (RGBA)

CSS3 are altă metodă de a folosi transparența, se face acest lucru printr-un canal alpha pentru culori de fundal. Internet Explorer nou acceptă aceastră proprietate, dar se poate de facut

Sintaxa CSS3 pentru stabilirea canalului alpha

Sintaxăcode.png printer.png info.gif #rgba p { background: rgba(98, 135, 167, .4); }

Pentru a simula în Internet Explorer se poate utiliza un filtru pentru a crea un gradient cu aceleaşi culori iniţiale şi finale care corespund la valoarea de transparenţă. O astfel de proprietate poate fi incluse în foaia de stil, numai pentru IE, care ar anula setările anterioare.

Sintaxăcode.png printer.png info.gif #rgba p {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');
}

Gradient arată la fel în IE și alte browsere, dublicînd efectul de transparenţă RGBA.

Demonstrație

Primul exemplu lucrează in browserele care suportă RGBA, iar al 2-lea lucrează numai în Internet Explorer

Acest paragraf are o culoare de fundal cu opacitatea de  40%, dar de RGBA (nu funcționează în IE).

This paragraph has an IE-only filter applied to mimic RGBA transparency (only works in IE).

  • Proprieatea filter nu trece validarea
  • Aveți nevoie de linii suplimentare de CSS pentru IE
Multiple Backgrounds

Aceasta este o altă tehnică CSS3, poți găsi multe aplicații practice utiizînd aceasta metodă. În prezent IE și Opera nu acceptă această tehnică. Dar este interesant că IE versiunea 5.5 a fost posibil folosirea de fundaluri multiple pentru același element.
În Firefox, Sahari, Chrome pentru utilizarea fundalurilor multiple trebuie de urmat următoare regulă CSS:

Sintaxăcode.png printer.png info.gif #multi-bg {
    background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
}

Pentru aplicarea a două fundaluri pentru același element în IE este următorea regulă:

Sintaxăcode.png printer.png info.gif #multi-bg {
    background: transparent url(images/bg-image-1.gif) top left repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 numai*/
} Demonstrație

Mai jos este un element cu fundaluri multiple care va fi vizibil în Chrome, Safari și Firefox(în IE nu se va putea vedea)

Mai jos este un elemnt cu două fundaluri care se va vedea numai în IE (în alte browsere va fi doar un fundal).

Dezavantaje
  • CSS nu va trece validarea
  • A doua imagine, folosind proprietatea filter, apare întotdeauna sus și nu se repetă. Astfel metoda este foarte limitată în utilizare
  • Pentru a plasa elementul în centru (ca în alte browsere), aveți nevoie de a crea o imagine cu un spatțiu alb suplimentar în jurul ei, pentru a imita o centrarea
Element Rotation (CSS Tranformations)

CSS3 are un set de transformări și animații care unele pot parea nepotrivite pentru CSS. Cu toate acestea, există o modalitate de a simula rotația elementului în Internet Explorer? deși într-o formă limitată
Rotația elementului la 180 grade (rotire pe verticală):

Sintaxăcode.png printer.png info.gif #rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

Pentru o astfel de acțiune în IE se folosește filtru:

cSintaxăcode.png printer.png info.gif #rotate {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

Parametrul rotation poate avea valori 1,2,3 sau 4. Care corespunde rotației la 90, 180,270 sau 360

Demonstrație

Elementul de mai jos ar trebui să apară cu susul în jos în Internet Explorer utilizînd proprietatea filter

Capul în jos.

Dezavantaje
  • CSS nu va trece validarea
  • În timp ce Mozilla și WebKit permite modificări de rotație la creștea cîte un grad(de exemplu 33grade), filtru IE permite rotație doar 4 etape, minimizînd flexibiliatatea
Concluzii

Deși IE nu suportă CSS3, aceasta nu înseamnă ca este imposibil de implimentat astfel de proprietăți

SURSA:

aici