kaxigt.com

Några bra csstips att lägga på minnet

När vi använder css vill de flesta av oss utnyttja denna maximalt men hur använder man sig av css på ett bra sätt? Vad bör vi undvika? Vad kan vi förbättra? Hur kan vi göra det enklare för oss? Jag kommer här att lista några bra tips som kan vara värda att lägga på minnet.

1 - Dela stilmallen

En god tumregel till att börja med är att dela stilmallen för bästa resultat. Försök också att hålla en enkel design. Med mindre grafik underlättar du för dig själv. Sidan blir dessutom mer snabbladdad.

2 - planera logiskt

När du planerar din layout tänk logiskt - det vill säga uppifrån och ned - utifrån och in. Börja med din wrapper. Fortsätt sedan med header, sidebar osv.

Undvik ‘divitus’” och ‘classitus’ - tänk ’semantikus’

Kännetecknande för xhtml är just semantiken (även om den är minst lika viktig även annars). Ett vanligt fel många gör är att modifiera redan vedertagen semantik. Titta på följande exempel:

1. <div id="header"></div>
2. <div class="bold">Huvudrubriken</div>
4. <div id="subheader"></div>
5. <div class="bold">Underrubrik</div>
7. <div>content</div>

Det här är semantiskt inkorrekt! Istället bör man använda definitionerna till vad de är till för.
Korrekt semantik

1. <h1>Huvudrubriken</h1>
2. <h2>underrubriken</h2>
3. <p>content</p>

Att använda semantisk html innebär således att använda respektive html element för det som de är gjorda till - inte till att användas för allt. Divar använder man alltså för att dela in sidan i logiska block när det inte finns andra alternativ och där varje blocks id tillåter dig att koppla andra element till dessa. Fundera därför över hur många boxar/divar du behöver. Säkerligen använder du fler än vad du egentligen behöver. Flertalet har dessutom en tendens att lägga all information inuti för ändamålet särskilda divar - det behöver man faktiskt inte göra. Ett vanligt exempel på nästlade block är detta:

1. <div id="sidebar"></div>
2. <div id="navcontainer"></div>
3. <div id="menu"></div>
4. <ul></ul>
5. <li>link</li>

Varför då krångla till det när du kan koppla din navigering via ett specifikt id som redan finns? Ta en titt på css:n här nedanför så förstår ni vad jag menar.

1. #sidebar...
2. #sidebar ul {list-style: none;background: transparent;margin: 5px 0px 10px 0px;padding: 0;}
3. #sidebar ul li {list-style:none;background: url(images/din_bild.gif) no-repeat 10px .30em; padding:3px 20px 5px 30px;}
4. #sidebar ul li a {display: block;color:#73AB02;text-decoration: none;margin: 0;padding: 3px 0 5px 5px;border-bottom: 1px solid #eee;}
5. #sidebar ul li a:hover {background: transparent;color:#ccc;border-bottom: 1px solid #ddd;}

Htmlkoden du lägger in i dokumentet blir sedan denna:

1. <div id="sidebar"></div>
2. <ul></ul>
3. <li>link</li>

Kan det bli enklare?
För det första eliminerar du en massa problem som kan uppstå när man nästlar olika div’s - exempelvis boxmodelhack. För det andra optimerar du såväl din css som din htmlsida med en ren semantisk välskriven kod, sk clean code. För det tredje blir sidorna mycket lättare att arbeta med. Du kan med gott samvete skapa en navigering för din header, sidebar samt main om du känner för det på samma vis som jag har beskrivit här ovanför. Du byter bara ut respektive id. Vill du sedan ha ett annat utseende på navigeringen i header och din mainbox, ja då ändrar du bara i inställningarna för csskoden gällande listorna i header och main. Svårare är det inte.

Ett annat mindre bra sätt att använda ett class-element för länkningen i listattributet är denna:

1. a.link{color:f0a;text-decoration:none}

Det ger denna output i dokumentet:

1. <ul></ul>
2. <li><a class="link" href="#">Link</a></li>

Det är väl ganska onödigt när du istället kan lösa det mycket smidigare med din css så här:

1. #menu a {color:#f0a;text-decoration:none}

Det ger denna output i dokumentet:

1. <ul id="menu"></ul>
2. <li><a href="#">Link</a></li>

Det ger samma resultat men du slipper att peta in extrakoder i html-koden. På detta vis kan du också styra hur dina listor ska skilja sig från varandra - du märker bara upp dem med ett eget unikt id.

Organisera din css

Organisera dina block, id, och classer efter ett logiskt system så hittar du snabbare det du söker efter. Exempel #header - allt som har med header att göra. Du kan även, vilket jag föredrar, organisera upp din css så din struktur för layouten ligger för sig. Därefter kommer presentationen för denna. Sist dina andra element såsom listor osv.

Shorthanddeclaration

Om möjligt - använd short hand declaration. Du minimerar märkningen och optimerar stilmallen.

Positionering

Försök att undvika aboslut positionering i den mån det går.

Hacks

Försök att undvika olika hacks om det inte finns en väldokumenterad bugg. Använd istället conditional comments så långt det är möjligt eller en specifik stilmall för IE.

Lägg till egen kommentarer i stilmallen

Du vet väl att du själv kan lägga till egna kommentarer i stilmallen? Så länge du lägger kommenterna inom dessa tecken / * och * / kan du skriva vad du vill utan att webbläsarna kan “se” det. Ibland är det vara bra att skriva upp färgen på fonten så man minns den om det är någon särskild man tycker om.

Validera dina koder - både html som css

Glöm inte att validera under arbetets gång. Ju oftare du gör det - desto enklare blir det att du hittar några fel.

(No Ratings Yet)

 Loading ...

Introduktion till HTML 5/XHTML 2 - del 1

Utvecklingen av HTML tycks ha splittrats till tre olika grupperingar, om vi ska tro Edd Dumbill. Han menar också att HTML, såsom vi nu känner till det, inte är något speciellt bra språk. Som ett exempel på detta ställer han sig frågande om vi verkligen behöver en sex-nivå-djup header hierarki (h1-h6). Likaså varför websidorna fortfarande är begränsade till att ha fula radioknappar och textboxar när det finns mer sofistikerade applikationer att använda. Här är jag faktiskt benägen att hålla med honom.

De tre olika grupperna vill också utveckla HTML till att anta en mer avancerad teknologi som kräver mer av dagens moderna användargränssnitt än vad de klarar av. En av dessa grupper är utvecklarna av AJAX - Asynchronous JavaScript och XML. Genom att använda javacript och webbläsarens httprequest kan man skapa interaktiva och dynamiska gränssnitt. Frågan är om detta är ett bra sätt att utveckla HTML på? Innebär det att alla är tvingade att ha javascript påslaget? Vilka konsekvenser får detta för de webbläsare som inte alltid är “up to date”? Kan man verkligen påstå att detta är ett bra sätt att standardisera world wide web?

Om vi kikar på de andra två grupperna vill de förbättra det som redan finns - men även här är man inte helt överrens. W3C vill lansera XHTML 2 baserat på kraven av en bred försäljning och inte bara till skrivbords- webbläsaretillverkare. För dem är XHTML 2.0 ett stort steg framåt. WHATWG har däremot intentionen att öka utvecklingen av specifikationerna i HTML för att tillfoga den mest omgående krävda funktionsdugligheten in i webbläsaren. En del av dessa applicationer finns redan i Apple’s Safari och Mozilla Firefox 1.5.x.

källa och fritt översatt från Edd Dumbill - ibm.com

Konsekvensen, som jag ser det, är att alla inte sitter på moderna webbläsare. Alla som surfar på nätet är inte webfantaster. Eftersom man ofta tror att andra har lika mycket kunskap och datavana som sig själv är det lätt att glömma grupper som enbart använder datorn likt ett hjälpmedel. Nu tänker jag inte bara på de som har handikapp av något slag utan även dem som enbart använder internet som en sökfunktion. Hur omfattande kommer användar och tillgängligheten vara? Hur ofta, och framförallt hur villiga, är dessa att uppgradera sina datorer? Har deras datorer kapacitet/systemkrav eller ens möjlighet till detta eller kommer internet (läs också “applikationerna för respektive hemsida”) att selektera eventuella besökare? Förvisso sker detta redan idag men den stora frågan är - kommer denna grupp att utökas? Behöver vi en utveckling av HTML och är HTML5/XHTML2 i så fall bra alternativ? I Introduktion till HTML 5/XHTML 2 - del 2 ska vi kika lite närmare på vad detta kan betyda för oss “vanliga” webbmakare.

(No Ratings Yet)

 Loading ...

AJAX - Asynkron JavaScript och XML

AJAX är något som ofta förekommer ute på webben nuförtiden och du har säkert stött på det flertalet gånger. Ordet AJAX kommer från begynnelsebokstäverna i Asynkron JavaScript XML vilket på förhand ger oss en hint om vad det är. Att använda begynnelsbokstäver från flera ord i samma sammanhang till att skapa ett enda ord som binder ihop dessa kallas för asynkroni - det kan vara bra att veta till andra tillfällen. Man använder AJAX för att bygga upp smidigare interaktiva applikationer på hemsidan och det kan vara intressant att förstå vilka grundläggande tekniker AJAX som applikation interagerar med.

1. AJAX som applikation interagerar med:
2. HTML
3. Javascript
4. DHTML - dynamisk html
5. DOM - dokument object model
6. CSS

HTML använder vi att bygga med. Javascriptet är det som möjliggör AJAX funktioner och hjälper till att kommunicera med applikationerna på servern. DHTML uppdaterar dynamiskt. DOM används via javascriptet för att både htmlstrukturen och din xml ska kunna returneras från servern som xml eller textsträng. CSS används till presentationen av applikationerna.

AJAX som funktion bygger på något som kallas för XMLHttpRequest vilket i klartext innebär en “förfrågan till servern” - det vill säga att skicka eller ta emot data från ett script som körs på servern. XMLHttpRequest är därför ett objekt som tillåter att javascriptet på en hemsida kan anropa serven utan att sidan laddas om. DOM objektet ger i sin tur javascriptet en möjlighet att skriva om innehållet på sidan. AJAX är populär därför att istället för att länka sig från sida till sida kan man använda AJAX som applikation till att bli en sida för sig själv. AJAX används därför ofta i formulär. När ska man då använda AJAX? Läs om 11 tillfällen för att använda AJAX samt de 5 vanligaste misstagen då man inte borde ha gjort det.

AJAX för dig? Intressant länkarkiv med olika skript

• 80 lösningar för professionell kodning med AJAX

(No Ratings Yet)

 Loading ...