Läste en mycket bra artikel på A List Apart av Ethan Marcotte om hur css3 specifikationen ”Media Queries” kommer till sin rätt när vi formger webbplatser för olika motagarenheter. Med hjälp av Media Query kan vi inte bara identifiera olika enheter utan även inspektera olika karakteristika på den enhet som renderar webbplatsen.
Läs hela artikeln här eller gå direkt till Ethans exempelsida och förstora/förminska webbläsarfönstret
/johan
Johan har i tidigare inlägg här på bloggen visat en bra sammanfattning av hur dagens webbläsare stödjer HTML5 & CSS3.
Som vi ser är det är stödet för CSS3 rätt hyffsat ubrett bland de moderna webbläsarna, bortsett från bromsklossen IE då.
Kan vi använda CSS3 fast inte stödjs fullt ut av alla webbläsare?
Ja, det kan vi. Mer läsning om detta här på bloggen:
Käpphästar är till för att veva med…
CSS3 – En av framtidens nya webbstandarder
Ser vi på stödet för HTML5 är det sämre och begränsat till färre webbläsare. Kanske inte så konstigt då standarden beräknas att vara färdig att släppas kring 2012.
Kan vi börja använda HTML5 redan nu?
Ja, till viss del i alla fall. T.ex. Google är redan i HTML5.
Här är en artikel som beskriver vad vi kan börja använda redan idag.
För den som är intresserad finns här en kort sammanfattning av vägen fram till HTML5.
I förra veckan fick webbläsaren Google Chrome ett utvecklarverktyg liknade IE’s Developer Tools och Firefox’s Firebug.
Efter en inte allt för grundlig test av alla dess funktioner, så kraschar min webbläsare på ett par av dessa. Andra fungerar bra. Jag räknar dock med att det är ”barnsjukdomar” som kommer att vara åtgärdade till nästa version.
Annars tycker jag verktyget känns trevligt att jobba med och ligger lättåtkomlig via en ikon i verktygsraden.
Pluginen finns att ladda hem här.
…så nu tar vi ett par varv ”Progressive Enhancement” igen.
För ett par veckor sedan skrev Mathias ett inlägg om css 3 och hur den standarden kan komma att påverka webben. Om vi lyfter diskussionen något från det rent tekniska till att handla om hur vi hanterar marknadens olika webbläsare och hur de renderar sidor på olika sätt hamnar vi snart i diskussioner som rör s.k. Progressive Enhancement (PE).
(fritt översatt från wikipedia)
I teorin betyder det att man startar med en enkel, semantiskt korrekt HTML som rymmer allt väsentligt innehåll (se bild 1). På detta lägger man sedan ett lager design i form av CSS för att sedan avsluta med ett yttre lager funktionalitet/upplevelse i form av JavaScript. Vi strävar efter att alla ska få en tillfredsställande upplevelse vid besöket, besökare med mindre avancerade webbläsare möts av en enklare, men fullt användbar, webbplats medan besökare med mer kapabla webbläsare får både ”pukor och trumpeter”.
(Bild 1, lånad från den utmärkta artikeln Understanding Progressive Enhancement av Aaron Gustafson)
I praktiken så fungerar det tyvärr inte riktigt på detta sätt. Vi levererar idag nästan alltid all ”extra” upplevelse till majoriteten av alla webbläsare även till de webbläsare som inte förstår implementeringen (läs IE 6-7). Vad som händer är att vi initialt har ambitionen att arbeta med PE men när det kommer till kritan och vi står där och ska testa i mindre kapabla webbläsare arbetar vi in ”pukorna och trumpeterna” även i dessa med hjälp av extra HTML/CSS och avancerade JavaScript trix, detta tillintetgör hela idén med PE
Inställningen till det visuella ögongodiset bör ses som en typ av belöning till de webbläsare som stödjer den avancerade kod som gör det möjligt snarare än något som saknas eller inte fungerar i de webbläsare som inte ännu är riktigt är med i matchen.
Häri ligger mycket av förändringen i inställningen, en design är inte felaktig för att den ser annorlunda ut i IE7 och vi har inte varit slöa då vi inte levererat en pixelperfekt lösning i alla webbläsare. Vi belönar, visuellt, användare med mer kapabla webbläsare, medan besökare med mindre kapabla webbläsare får en fullt användbar webbplats med lite mindre ögongodis.
Jämför tex. bild 2 och bild 3 här nedan. Bild 2 är hur Twitter ser ut i Internet Explorer 7, notera de kantiga hörnen på boxar etc. Jmf. sedan med Bild 3, Twitter i Safari. Nu kanske man ska akta sig för att uppskatta tidsåtgången för att implementera alla de runda hörn som finns på Twitter (Safari) så att de fungerar även i IE 7, men jag gör det ändå. Min uppskattning är att man enbart på dessa detaljer spar minst en arbetsdag css/html.
Bild 2: Twitter i Internet Explorer 7 utan runda hörn
Bild 3: Twitter i Safar, med runda hörn
Nu får det vara slutvevat för denna gång. Här nedan har jag samlat några länkar för den som vill läsa mer i ämnet. För dig som inte riktigt känner att du vill/orkar läsa mer om detta vill jag starkt rekommendera denna sammanfattning: Do websites need to look exactly the same in every browser?
@media 2010
2 dagar av @media 2010 London avverkade
Här följer en lista på några av de presentationer jag följde.
Dag två startade med en riktigt bra och engagerande dragning av Andy Clarke (@Malarkey) om hur vi inte bör låta oss begränsas av inte fullt så avancerade webbläsare utan designa för de mest kapabla och sedan hantera de andra. Om hur vi kan hantera IE6 med hjälp av universiellt css, helt enkelt strippa ie6 från all avancerad form. Måste tillstå att tanken är lockande, läs Andys resonemang här. Detta följdes upp av Remy Sharp (@rem) om html5 javascript APIS, mycket demos på vad som är möjligt att göra.
För den som vill läsa ett något mer strukturerat inlägg om @media 2010 så har Peter Gasston gjort en mycket bra sammanfattning
/johan liw