Själv är jag inte säker på hur användbart detta är, men det är en intressant idé. Nån gång kommer man nog kunna behöva klippa/klistra-funktion och då kan detta vara intressant att kolla vidare på.
Blueprint är ett projekt på Google Code som är släppt som öppen källkod under MIT licens. Det är en uppsättning CSS-mallar som skapar en smidig grund att bygga din CSS-design ovanpå. Efter en snabb koll tycker jag det ser riktigt bra och man har lagt fokus på att följa webbstandarder och tabell-lös design.
Intressant att notera är demosajtens bredd (skärmdump här ovan) som är exakt 960px bred. Det ger en ytterligare bekräftelse att detta börja bli ett slags standardmått, nu när fler och fler användare sitter på 1024-skärmar. Läs gärna vår tidigare artikel som handlar om att designa webbsidor med 960px bredd och rutnät. Kan tänka mig att dessa ideer har inspirerat folket bakom Blueprint.
Något annat värt att notera i Blueprint-projektet är att man har möjlighet att placera textraderna i jämna rader vertikalt. Tidigare länk på detta ämne finns hos oss, här.
Blueprint verkar alltså vara ett riktigt intressant projekt värt att kolla närmare på, för alla som vill ha en bra grund till CSS-design och ger ett bra rutnät, mall för utskrift och typografi-regler.
Även fast de sista tre två specifikationerna inte är klara, så ska tabellen representera de senaste rekommendationerna. Han förklarar att han ska fortsätta att uppdatera listan så fort några förändringar sker.
Rene Sarsoo har gjort en variant av listan med färgkodning, så man kan se vilka element som är på väg bort och vilka som är nytillkomna.
Här gör jag en liten sammanfattning om tips för hur man får en .NET-applikation att validera som XHTML Strict.
Så testar man
För att avgöra om sina sidor validerar mot den webbstandard som man valt att följa så kan man använda valideringsverktyget från WC3.
Vill man vara extrem så kan man ju även testa den nya betaversionen. Märkte just en skillnad från den vanliga versionen. I nya betan måste ange rätt namnrymd i html-taggen för att validera som Strict, så här alltså:
<html xmlns="http://www.w3.org/1999/xhtml">
Ställ in Web.config
Använder man .NET som utvecklingsplattform så finns det några saker man bör ha med i <system.web>-delen av Web.config för att slippa konstiga fel.
Sen även lägga till följande rad så att koden ska följa Strict-standarden. I detta läge får inte form-taggen inte ska få något name-attribut (det får den inte ha i XHTML). Antagligen är det fler saker som händer med koden men vet inte precis.
<xhtmlConformance mode="Strict" />
Den extra diven runt viewstate
I och med .NET 2.0 så har en del förändringar skett så att koden ska bli mer XHTML-kompatibel. Bland annat så läggs numera en extra <div> runt viewstate.
Det här kan dock ställa till problem med CSS formatering. För den nya div-taggen har inte har någon css-klass eller id och är därför svår att styla utan att påverka resten av dokumentet. Den här taggen har flera gånger förstört layouts för mig, så jag förstår de som klagar.
Som de flesta webbutvecklare är medvetna om skiljer sig rendereringen mellan webbläsare en hel del. Webbläsarleverantörerna blir för visso bättre och bättre på att följa standarder men ännu är inte situation perfekt.
En av de riktiga mardrömsläsarna att göra design för är ju Internet Explorer 6.0 och tidigare versioner. Vi har tidigare skrivit lite om hur man kan se hur sina alster ser ut i denna läsare på några olika sätt. Dels genom att köra den i en virtuell miljö eller att använda tjänsten Browsershots.
Nu hittade jag via Lifehacker ännu ett alternativ som heter IE Netrenderer. Med denna onlinetjänst kan man se hur en hemsida ser ut i IE 5.5, 6 och 7.
När man tillhandahåller ett CMS-system åt en kund så är det nästan oundvikligt att kunderna kommer att skriva in ogiltig XHTML. Alla kan helt enkelt inte vara webbstandard-freaks och det är inget man kan kräva av någon.
Då skulle det vara perfekt om man kunde få en varning så fort ogiltig kod har publiserats, så man kan gå in och rätta till den.
Blitz Labs har gjort en sådan lösning och delar med sig av .NET-koden. Funktionen tar emot en url som ska kontrolleras. Skickar ett anrop till W3C Markup Validation Service. Tar emot resultatet genom deras SOAP-tjänst och transformerar det till RSS med hjälp av en XSLT-fil.
Prenumenera sedan på den RSS som skapats och få meddelande så fort någon ogiltig kod har publiserats.
Den senare beteckningen (What You See Is What You Mean) var något nytt för mig men låter definitivt som något att kolla vidare på. Om jag har förstått det rätt så ska denna nya typ av editor generera XHTML och separera innehåll från formatering i större mån. Läs mer om den nya typen av editor eller testa en demo-version av WYMeditor som hör till denna kategori.
Med på Peters test finns TinyMCE som jag installerade i mitt blogg-system nyligen. Den kom bara på tredje plats i testen pga inkorrekt nästlade listor, inget stöd för tabellcaptions och avsaknad av lang-attributet. I nästa version av editor (2.1) kommer dock dessa problem vara lösta meddelar utvecklarna på Moxiecode i en kommentar till testet.
Det har nyligen blivit krångligare att embedda flash i sina projekt. I alla fall om man vill följa webbstandarder och få det att funka i alla webbläsare.
En käpp i hjulet var Eolas stämning mot Microsoft som ledde till att mjukvarujätten beslutade sig för att ta bort viss funktionalitet ur IE. Som tur var gick det att hacka runt det och vi har skrivit om en lösning hur man fixar autostart på ActiveX-objekt tidigare.
Nu har samma sajt (AAL) skrivit en uppföljare med ny genomgång av flash-trasslet. Har inte läst hela men man diskuterar bland annat taggarna embed och object plats ibland webbstandarderna. Denna kommer jag återvända till nästa gång jag känner för att försöka använda flash och samtidigt ha en XHTML-kompatibel hemsida.
Uppdatering: Tyckte jag läst nåt annat om det här nyligen, Robert Nymans inlägg om XHTML med Flash är något att kolla vidare på.
Att få fram en hand som markör på alla webbläsare är något som länge förvirrat mig hur man gör. Jag hade helt enkelt inte läst på ordentligt och ibland vad den någon webbläsare som markören inte ändrades alls på mina webbplatser. Nu har jag fått klarhet i det hela cursor:hand är inte någon CSS-standard alls utan ett påhitt från Microsoft. Istället ska det standardiserade cursor:pointer användas. Cursor:pointer fungerar dock bara i den nyare IE6 och IE7 och inte i IE5 eller IE5.5. Om man har besökare som fortfarande använder så gamla browers så kan man använda en dubbeldeklaration.
element { cursor: pointer; cursor: hand; }
Ordningen på deklarationerna är viktiga för att moderna läsare ska ignorera det sista som är felaktigt. De gamla versionerna av IE kommer då också att visa en hand som markör. Att använda en sådan deklaration kan ju dock generera CSS fel vid validering så jag väljer nog att lämna de gamla IE versionerna åt sitt öde och bara använda cursor:pointer i framtiden.
Att se till att en hemsida följer webbstandarderna från W3C är väldigt viktigt ifall man vill att designen ska fungerar bra på alla olika läsare. Annars förlitar man sig på hur bra (och hur) läsaren hanterar felen. Resultatet kan då variera stort.
Måste erkänna att jag aldrig direkt har kämpat för detta tidigare. Webben har helt enkelt känts för "trasig" för att man ska orka bry sig. Men när nu IE7 är på gång och Microsoft verkar ta webbstandarderna på allvar, så känns det värt att börja rensa sina egna alster från icke-validerad kod. Okej då kör vi!
1. Validera som XHMTL Transitional Nu lyckade jag för första gången skapa en webbsida (den här bloggen) som validerar som XHTML 1.0 Transitional.
Min startsida som innehåller flash blev dock lite svårare att få att validera som XHTML pågrund av att den innehåller en flashfilm. Hittade en bra artikel på ämnet men den hjälpte mig tyvärr inte hela vägen.
2. Validera som giltig CSS Nästa steg blir CSS validering, detta gick ju fint också.
Fick dock en hel del varningar - bland annat som säger "You have no color with your background-color" och liknade. Detta beror på de nya W3C reglerna som introducerades nyligen. Att följa dessa kan dock skapa en del oväntade effekter. Så jag väljer att ha kvar varningarna - de är du endå bara varningar.
3. Validera ett RSS-flöde RSS-flödet i min blogg är också riktig. Fick en varning på kodningen:
"Your feed appears to be encoded as "iso-8859-1", but your server is reporting "US-ASCII""
Detta såg jag många som haft problem med men hittade ingen lösning.
![[Valid RSS]](http://validator.w3.org/feed/images/valid-rss.png "Validate my RSS feed")