CSS. Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS

Transkript

1 CSS Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS

2 CSS står for Cascading Style Sheets CSS blir brukt til å bestemme hvordan HTML-elementene skal se ut (farge, størrelse, plassering etc) I dag: CSS 2.1 I morgen: CSS 3 Rounded corners, gradient, dynamikk

3 Eksterne stilark Interne stilark Inline / element stiler

4 Eksternt stilark <link rel="stylesheet" type="text/css" href="stylesheet.css"/> Anbefalt siden man kan gjenbruke samme stilsett på flere sider Internt stilark <style type="text/css">... </style> Kan brukes til stiler som kun finnes på en side Kan brukes til å overstyre stiler for en side Inline style attributt på enkelte element <img src:= image.gif alt= Bilde style= border:none; /> Bør ikke brukes dersom man kan unngå det

5 Selector {property:value;} Utvelgere (selectors) kan grupperes ved å separere de med komma Flere egenskaper (property) kan settes i samme definisjon

6 /* Dette er en kommentar */

7 Bakgrunnsbilde eller farge background-color: green; Tekstfarge, tekstutseende, tekstflyt color: yellow; text-align: right; text-transform: uppercase; Font, fontstørrelse, fontutseende font-family: Verdana; font-weight: bold; Border (ramme), margin (marg), padding (polstring?) border: solid 1px red; margin: 10px 5px 9px 10px; padding: 5px 10px;

8 body {font-familiy:verdana,arial,sans-serif;} p {color:black;font-size:12px;} h1, h2, h3, h4 {color:blue;font-weight:bold;} h1 {font-size:24px;} h2 {font-size:1.3em;}

9 Id - # Klasse -.

10 Pixler - px Fast størrelse i pixler Em (ex) Skalerbar / relativ størrelse. Relativ i forhold til foreldreelement. Kan fort føre til arvekaos dersom man ikke har kontroll. Prosent Relativ størrelse i forhold til foreldreelement. Point pt Fast størrelse i pt. Kan brukes for fontstørrelser. Best egnet til print.

11 All (Suitable for all devices) braille (intended for braille tactile feedback devices) Embossed (intended for paged braille printers) Handheld (intended for handheld devices (typically small screen, limited bandwidth)) Print (intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.) Projection (intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media) Screen (intended primarily for color computer screens) Speech (intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details) Tty (intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type) Tv (intended for television-type devices (low resolution, color, limited-scrollability screens, sound available)

12 Desverre er det ikke lik støtte for CSS i de ulike nettleserne. Selv om CSS 2.0 kom for over 10 år siden, er det ikke full støtte for dette enda. Det er også en del egenskaper som er feil implementert i ulike nettlesere som også gjør at det ikke fungerer likt i alle nettlesere. Dette gjør det vanskelig for utviklere å få nettsider til å se likt ut og å fungere som ønsket i alle nettlesere. Spesielt siden den mest brukte nettleseren (Internet Explorer) er den med flest feil og mangler... Løsning: teste nettsider i så mange nettlesere som mulig; IE6, IE7, IE8, Opera, Firefox, Chrome, Safari, i tillegg til nettlesere på Mac.

13 Utfordring: det finnes veldig mange ulike telefoner som har sine egne standarder, og mobiler byttes ofte ut. Support for handhelds is going to be a far worse mess than the mess of browser support for computers ( WAP2 (WCSS og xhtml MP, subset av CSS og xhtml) av Open Mobile Alliance Fordel med WAP2 same teknologi kan brukes både på nettsider og den mobile versjonen av nettsider <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" " WAP baserte seg på WML CSS for handheld MEDIA="print, handheld" Safari på iphone

14 Man må ikke kunne kode HTML og CSS, men kjenne til landskapet og konsekvenser av å ikke følge standarder 14