Felaktig CSS på MacWorld

[vimp]

Hej,

 

På ett flertal ställen på MacWorld så används "felaktig" CSS, främst för gradients.

 

Ni har till exempel det här just nu:

 

-webkit-gradient(linear,left top,left bottom,color-stop(0%,#8a8a8a),color-stop(50%,#707070),color-stop(51%,#5e5e5e),color-stop(100%,#777))

 

För att det ska fungera korrekt i alla webbläsare (även äldre Firefox och Chrome/Safari) så kan ni ha det här istället:

 

background-image: -moz-linear-gradient(top left, #8a8a8a 0%, #707070 50%, #777777 100%);
background-image: -o-linear-gradient(top left, #8a8a8a 0%, #707070 50%, #777777 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #8a8a8a), color-stop(0.5, #707070), color-stop(1, #777777));
background-image: -webkit-linear-gradient(top left, #8a8a8a 0%, #707070 50%, #777777 100%); 
background-image: linear-gradient(to bottom right, #8a8a8a 0%, #707070 50%, #777777 100%);

 

Då fungerar det med Firefox, Opera, Safari/Chrome 10, Chrome 11+ och sedan de webbläsare som följer W3C-standarden.

 

Som det ser ut nu så ser det ut så här om jag öppnar sidan samtidigt i IE 10 och Chrome 26:

http://i49.tinypic.com/o5dffo.png

 

Som ni kan se där så ser menyn helt galen ut på grund av att ni inte följer standarder. Att bara ha Webkit-prefixet och sen inga andra prefix och ej heller utan prefix är precis lika illa som att ha en "Best viewed in Internet Explorer 6"-knapp längst ned på sidan...

 

Så gör gärna alla webbutvecklare (och besökare för den delen) en stor tjänst och fixa till det lilla problemet. :-)

[xeric]

[+] Helt riktigt. Man måste hänga med.

 

Ja, och det kanske borde finnas med en "fallback" med i början innan den första:

background: #8a8a8a;

 

Men det är ju lite konstigt att inte IE10 tar det. Tänkte mest på att det finns ju med ett "filter:" redan nu:

background:-moz-linear-gradient(top,#8a8a8a 0,#707070 50%,#5e5e5e 51%,#777 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#8a8a8a),color-stop(50%,#707070),color-stop(51%,#5e5e5e),color-stop(100%,#777));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#5e5e5e',GradientType=0);

Läser inte 10'an dem.

[vimp]

Absolut, en "vanlig" bakgrundsfärg bör finnas där för de äldre webbläsarna.

 

Microsoft har tagit bort stödet för filter, behaviours, conditional comments och annat i IE 10 för att istället ha tagit steget att satsa på det som är standard. Istället så har de fått stöd för t.ex. gradients (enligt W3C-specifikationen och utan prefix), så den nedersta raden fungerar finfint med IE 10.

 

De problem som man tidigare behövde conditional comments är så få att de inte behövs längre. Det är helt enkelt bara att skriva all kod "rätt" och använda prefix för alla webbläsare (och självklart avsluta med en "prefix-fri" variant) så kommer det att fungera finfint.

 

För att se vad webbläsaren har stöd för och eventuellt få ladda in polyfills så fungerar Modernizr bäst då det använder feature detection och inte browser detection.

[vimp]

Såg förresten att jag missade lite där uppe. Ska vara mer i stil med:

 

background-image: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #5E5E5E 51%, #777777 100%);
background-image: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #5E5E5E 51%, #777777 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8a8a8a), color-stop(0.5, #707070), color-stop(0.51, #5E5E5E), color-stop(1, #777777));
background-image: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #5E5E5E 51%, #777777 100%);
background-image: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #5E5E5E 51%, #777777 100%);

[xeric]

Jag tror t o m att det "nya sättet" är "to top, ". http://dev.w3.org/csswg/css3-images/#linear-gradients Men om att "top" skulle vara kvar på de raderna för de äldre webkit/moz.

 

- - -

 

IE10 ligger långt fram. Du som har den... har de plockat bort kompabilitetsstödet med?

 

Jag kör med prefixr: http://prefixr.com/ Finns även som en "Automator service" för OS X, så man bara kan högerklicka på en markerad css3-text som returnerar den "rätt" (förhoppningsvis) kod tillbaks. Annars kör jag med PIE. Är bra, och en vers 2 är på gång med. Fast Modernizer är riktigt bra. Men jag kör hellre med mer CSS än mer javascript.

 

Testade lite den här (rel. ny): prefixfree som kändes lovande. Men den var inte så bra. Hoppade o flimrade till. Den fixar ju till det efteråt, så det hinner bli fult först innan det blir bra. Men tanken var ju god.

[vimp]

Om det tidigare var "bottom" för att gå från botten till toppen så är det idag "to top" istället. Inte så stor skillnad, men tillräckligt för att sidor med gradients måste uppdateras.

 

Jag testade prefixfree förut och det fungerar riktigt fint, men jag kör också hellre CSS än JavaScript för sådant då jag föredrar att ha allt på "rätt" ställe. Microsoft har också ett verktyg för att få fram gradients som fungerar i alla webbläsare:

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

 

För polyfills finns även yepnope.js som faktiskt är riktigt smidigt för sådant tillsammans med Modernizr. Finns ett bra exempel på hur det fungerar längst upp på sidan:

http://yepnopejs.com/

 

Då jag kör med .NET på serversidan så blir det Visual Studio för egen del. Stödet för HTML, CSS och JavaScript har blivit riktigt bra där på senare år, och med Web Essentials så får man mycket gratis, som t.ex. att automatiskt lägga på vendor-specific prefixes, stöd för LESS, automatisk JSHint, skapande av Source Maps vid minifiering av JavaScript m.m.:

http://vswebessentials.com/

 

 

[Joel Westerholm]

Bra! Inser att jag slarvat med att testa i IE10. Har fixat toppmenyn, får ge mig ut på gradientjakt nu då för att fixa resten.

 

Bra tips om Microsofts verktyg också, funkade utmärkt.

[vimp]

Härligt! Nu ser det perfekt ut även i IE 10. :-)

[Joel Westerholm]

Härligt! Nu ser det perfekt ut även i IE 10. :-)

 

Jepp, jag kan just nu bara testa i release preview-versionen av IE10 då jag har Windows 7 installerat i Parallels. Men jag utgår från att det fungerar likadant i den skarpa versionen.

[vimp]

Jepp, jag kan just nu bara testa i release preview-versionen av IE10 då jag har Windows 7 installerat i Parallels. Men jag utgår från att det fungerar likadant i den skarpa versionen.

 

 

Jag sitter med Windows 8 och skarpa IE 10, och det ser rätt ut här.

[Justitia]

Vet inte om det har med vad som avhandlas i denna tråd att göra, men länkarna till min profil, som brukar vara i en liten rullgardinsmeny till höger, är nu synliga i en ruta som täcker knappen för "visa senaste". Irriterande.

(Använder för tillfället föräldrarnas PC med Firefox 18.0.2.)

[Pocahontas]

Vet inte om det har med vad som avhandlas i denna tråd att göra, men länkarna till min profil, som brukar vara i en liten rullgardinsmeny till höger, är nu synliga i en ruta som täcker knappen för "visa senaste". Irriterande.

(Använder för tillfället föräldrarnas PC med Firefox 18.0.2.)

 

Fått samma som du beskriver, jäkligt irriterande, framför allt i iPaden

[Pocahontas]

Nu går det inte att bifoga bilder plötsligt..