22. juli 2008 - 22:24Der er
15 kommentarer og 1 løsning
background i html- eller body-selector
Hej
Jeg har set et eller andet sted på nettet, at forskellen på html- og body-selectoren skulle være, at html-selectoren dækker hele dokumentet inkl. rullepaneler, mens body-selectoren dækker fra starten af venstre margin til slutningen af højre og fra starten af øverste margin til indholdets slutning.
Spørgsmålet er så, om det ikke er mere "korrekt" at definere background i html-selectoren, da baggrunden jo dækker hele dokumentet. Det, der undrer mig er, at jeg oftest ser den defineret i body-selectoren.
Browserne accepterer det, men du kan jo prøve at validere:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html style="background:#000;overflow:hidden"> <head> <title>Hello World</title> </head> <body>
<p style="height:3000px;background-color:blue"> Hello World </p>
</body> </html>
Med W3C's validator får man at vide, at man ikke kan lægge style-attributten på html-tag'et. Derfor synes jeg også, man bør prøve at begrænse html-tag'ets eksterne CSS-data. (Det er dog alligevel meget almindeligt f.eks. at sætte height:100%; på html-elementet, selvom det ikke er nødvendigt i de nyeste browsere.)
Derudover kommer jo, at body repræsenterer det synlige i dokumentet, og at html-tag'et bare er rodnoden. Så jeg er ikke helt enig i det, du har læst.
w13 >> Du må heller ikke have f.eks. attributten 'minSpecialAttribute' stående noget somhelst sted i din markup - men du må gerne sætte den med script. HTML-validatoren tjekker blot, hvad der måtte kunne genere HTML-parseren i indlæsnings øjeblikket. Det, der er interessant, når man skal vurdere validitet af noget CSS, er, hvad CSS-validatoren siger ;o)
Grundet de forskellige browseres måde at tolke markup på, har jeg flere gange været nødt til at lægge baggrunden på dokument elementet (html-selector'en i CSS). Derfor lægger jeg personligt altid baggrundsfarve på både dokument- og body-elementerne - f.eks:
I X(HT)ML er et element blot et element. Der findes ikke det hieraki, vi kender fra HTML, hvor dokument- og body-elementerne er noget helt specielt. Derfor skal man nok også være lidt forsigtig med, hvad der er 'tiltænkt' de forskellige elementer ;o)
Grunden til spørgsmålet kommer frem er, at jeg har en centreret side, hvorfor jeg har sat overflow-y: scroll i html-selectoren. Sættes denne i body-selectoren viser IE nemlig scrollbaren ved højre-marginens start og ikke helt ude til højre. Det var derfor, jeg tænkte, det måske lød meget fornuftigt, at body-elementet startede fra marginerne. Desuden viser den nyeste Opera "vis udskrift" forskelligt alt efter selector. Står baggrunden i html-selectoren, dækker den hele dokumentet, står den i body-selectoren dækker den kun sidens indhold.
Ja, det gør en overordentlig væsentlig forskel! XHTML1.1 understøttes slet ikke af IE, som vil tilbyde at downloade siden i stedet. CSS3 eksisterer slet ikke =)
Du skriver, somom det er en selvfølge, at du sætter vertikal overflow til scroll. Det er det nu ikke, så hvorfor gør du det?
Under alle omstændigheder er det altid dokument elementet, der scroller. Det var kun i IE op til - men ikke med - version 6.0, det var body elementet, der scrollede. Fra IE 6 er det body elementet, når dokumentet ikke er CSS1 kompatibelt og ellers dokument elementet. I andre moderne browsere scroller dokument elementet.
Hvad du skriver om Operas 'Vis udskrift', lyder helt korrekt ifølge CSS standarden =)
Jeg anvender overflow-y fordi, mit design er centreret. Hvis der ikke altid vises en scrollbar, vil de sider, der ikke er ret lange være længere til venstre end siderne, der har scrollbar. For at siden ikke skal hoppe fra højre til venstre, anvender jeg scrollbars på alle sider.
Overflow-y findes kun i CSS3-udkastet, derfor validerer min CSS kun som CSS 3. Alt andet i CSS'en end overflow-y validerer som 2.1
Mht. til doctypen er der ingen ændring, hvis den ændres til XHTML 1.
Hvis Opera parser baggrundsfarven i "vis udskrift" korrekt, burde siden så ikke vises på samme måde i normal visning, så background-color anvendt i body-selectoren kun dækker inden for marginerne og kun til indholdet ophører?
Ja, validering af CSS kan være lidt tricky. CSS foreskriver, at klienter, som ikke forstår en property, blot skal springe den over. Det gør det lidt vanskeligt at tale om valid og invalid CSS ;o)
Jeg tror, der er en del, du har misforstået omkring markup - og specielt XHTML. DTD'en er ikke bare noget, man skifter. Dokumentet skal jo bl.a. sendes med den MIME type, som svarer til markup versionen. Prøv at læse: http://www.eksperten.dk/artikler/537 http://www.eksperten.dk/artikler/538
- under html selector'en, hvis du altid ønsker minst hele viewport'en farvet.
Et element er et element (næsten da), så du lægger baggrunsfarven på det element, du ønsker farvet - og body elementet er jo kun så højt, som dets indhold.
Selvtak. Da der ikke sker nogen skade ved det, skriver jeg dog selv baggrundsfarven i samme hug, som jeg sætter andre egenskaber for de to yderste elementer - som i kommentaren (23/07-2008 15:14:42)
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.
