intermediate

...now browsing by tag

 
 

#GGM10 – CSS intermediate

Sunday, May 23rd, 2010

@annika, Annika Lidne från Disruptive Media berättar mer för oss om CSS.
Block: div, h1, h2, ul, ol, dl, blockquote, p osv.
Inline: span, strong, em, a, img, cite, q osv.
<h2><span>Hej</span></h2>
Skulle man skriva <div>istället för <span> så blir det en ny rad, eftersom div är ett block.

Använd de html koder som finns. Google kommer inte indexera <div id=”headline”> som en rubrik. Använd hellre <h1>. Använd de html element som är där för att användas.
Lär dig hantera html, och sidan bör ha en bra struktur utan CSS. Listor där det ska vara listor. Och så vidare. Ett välstrukturerat html dokument.

Med dålig sourceordering kan det bli jättejobbigt att surfa in på sidan om man inte använder en vanlig dator som kan hantera allt.
Tänk på sourceordningen!
1, 2, 3, 4, 5.
Sortera om source ordering så att det viktigaste är först.

Vanligt när allt “pajjar” i CSS så har man tappat en liten tag någonstans, en ; eller liten tagg.

Plugin: Web Developer, Tools, Validate Kod.
Det är lätt att tappa smågrejer. Enklare att hantera och hitta det man saknar.

Stylesheets:
Media= -all
- screen
handheld
- print
tv
projector
aural

När man börjar göra egna layouter är det vanligaste att man avänder ett css framework. Blueprint var ett av de största, till att börja. 960 Grid System, Fluid 960 Grid System. YUI 2: Grids CSS (Yahoo).

Börja jobba med frameworks, så sparar ni mycket tid. Gridsystemgenerator.com. Layoutgala. Inte bloated, lätt och enkel.
Blueprint Wordpress Theme.
Liknande i Drupal.

IE7.js IE8.js, selective comments. Conditional Comments, googla på det så hittar ni precis vad man behöver skriva för olika IE versioner.
Man kodar för de moderna browserna. En bra upplevelse för FF, Safari, Chrome.

CSS Tools: Reset CSS.
Lägg alltid det först i din CSS-kod.

CSS guru Meyer

CSS3 har kod för runda hörn. Gör sidan lite mjukare och mysigare.
CSS3 round corners, CSS3 Box Shadow.

@font-face, ladda in ett typsnitt. Finns generatorer som laddar upp till olika browsrar.
Typeface generator
Google har nyligen släppt ett typ bibliotek, Open-source.
Fontsquirrel.com/fontface/generator

CSS3.com CSS3.info