CSS positionering Thomas Aertssens 2008-2009

Alles is gepositioneerd document volgorde block vs inline (x)html Browser defaults css width, height, padding, border, margin display float position overflow z-index

document volgorde

block vs inline

(x)html Browser defaults

css

width, height, padding, border, margin

display

float

position

overflow

z-index

Css voor paginalayout Semantische xhtml-opbouw

Semantische xhtml-opbouw

Design benadering scheiding semantiek en design valide xhtml semantische namen voor class en id navigatie ipv linkerkolom nieuw ipv blauw_groot less is more Hou xhtml en css zo eenvoudig mogelijk verschillende css voor verschillende media @media alternate styles toegankelijke pagina's

scheiding semantiek en design

valide xhtml

semantische namen voor class en id

navigatie ipv linkerkolom

nieuw ipv blauw_groot

less is more

Hou xhtml en css zo eenvoudig mogelijk

verschillende css voor verschillende media

@media

alternate styles

toegankelijke pagina's

Css en divs divs voor de paginaregio's

divs voor de paginaregio's

Tabellen zijn toegelaten in xhtml! voor data relatie tussen data th voor relatie-titels (geen class) caption, summary enige att in html cellspacing wegens onvolmaakte browsers

voor data

relatie tussen data

th voor relatie-titels (geen class)

caption, summary

enige att in html

cellspacing wegens onvolmaakte browsers

Datatabellen en css tabellen.html

tabellen.html

divs en divitis zuinig met divs: is er geen ander element? divitis.html divitis in wysiwyg visual studio.net layers in Dreamweaver

zuinig met divs: is er geen ander element?

divitis.html

divitis in wysiwyg

visual studio.net

layers in Dreamweaver

classitis classitis geen onnodige classes - contextuele selectoren .navigatie #navigatie li

classitis

geen onnodige classes

- contextuele selectoren

.navigatie

#navigatie li

Compacte code veel minder code vrijwel alle attributen verdwijnen uit de code <p><font color=&quot;red&quot; size=&quot;+2&quot; face=&quot;Arial, sans-serif&quot;>Dit is veeel werk</font></p> geen redundante code spacer-gifs, tabellen in tabellen, lege p-tags, sequentiële breaks overzichtelijke code modulaire opbouw consequente siteopbouw: templates

veel minder code

vrijwel alle attributen verdwijnen uit de code

<p><font color=&quot;red&quot; size=&quot;+2&quot; face=&quot;Arial, sans-serif&quot;>Dit is veeel werk</font></p>

geen redundante code

spacer-gifs, tabellen in tabellen, lege p-tags, sequentiële breaks

overzichtelijke code

modulaire opbouw

consequente siteopbouw: templates

Compacte code slashdot: van puur html naar css redesign winst zonder css-caching: ~2KB / request winst met css-caching: ~9KB / request zo'n 50miljoen bez / maand = ~1 612900 / dag winst zonder css-caching: ~3.15 GB / dag winst met css-caching: ~14 GB / dag

slashdot: van puur html naar css redesign

winst zonder css-caching: ~2KB / request

winst met css-caching: ~9KB / request

zo'n 50miljoen bez / maand = ~1 612900 / dag

winst zonder css-caching: ~3.15 GB / dag

winst met css-caching: ~14 GB / dag

Compacte code kul redesign (simulatie) kul - tabeldesign met basis- css xhtml / css gepositioneerd redesign

kul redesign (simulatie)

kul - tabeldesign met basis- css

xhtml / css gepositioneerd redesign

Compacte code = overzichtelijke code voorbeeld: subnavigatie

voorbeeld: subnavigatie

Css selectoren: specificiteit Berekening : (0) 0 0 0 elk (pseudo-) element : 4 de waarde + 1 elke (pseudo-)class : 3 de waarde + 1 elke id: 2 de waarde + 1 bij gelijk gewicht: documentvolgorde bepalend inline-stijl: altijd grootste gewicht (1 ste waarde +1) !important krijgt steeds voorrang

Berekening : (0) 0 0 0

elk (pseudo-) element : 4 de waarde + 1

elke (pseudo-)class : 3 de waarde + 1

elke id: 2 de waarde + 1

bij gelijk gewicht: documentvolgorde bepalend

inline-stijl: altijd grootste gewicht (1 ste waarde +1)

!important

krijgt steeds voorrang

Css selectoren: specificiteit CSS2.1<>CSS2.0 voorbeelden

Tools Firefox (mijn keuze) betrouwbare testtool Firefox addons Web developer toolbar http:// chrispederick.com / View source in editor html validator firebug IEtab IE web developer toolbar

Firefox (mijn keuze)

betrouwbare testtool

Firefox addons

Web developer toolbar http:// chrispederick.com /

View source in editor

html validator

firebug

IEtab

IE web developer toolbar

Positionering en paginalayout De theorie

Css voor paginalayout vorige generatie layouts: tabellen in html

vorige generatie layouts: tabellen in html

Paginalayout: basiselementen boxmodel maateenheden fonts maatberekening containing block floating positioning

boxmodel

maateenheden

fonts

maatberekening

containing block

floating

positioning

Boxmodel

Boxmodel feitelijke breedte in browser: leftmargin+leftborder+leftpadding+content +richtpadding+rightborder+rightmargin boxmodel auto-invulling van niet-gedefinieerde eigenschappen eenheden kunnen ook negatief zijn. vb margin: 20px; padding:0; auto-width margin: 0 auto; width:50% auto-marge L&R verschillend voor block en inline elementen opgepast met quirksmode -> Gebruik doctype

feitelijke breedte in browser:

leftmargin+leftborder+leftpadding+content +richtpadding+rightborder+rightmargin

boxmodel

auto-invulling van niet-gedefinieerde eigenschappen

eenheden kunnen ook negatief zijn.

vb

margin: 20px; padding:0; auto-width

margin: 0 auto; width:50% auto-marge L&R

verschillend voor block en inline elementen

opgepast met quirksmode -> Gebruik doctype

Maatberekening Marges en margin-collapsing : blockelementen: 100% breed vertikale marges schuiven in elkaar inline elementen, floating elements Breedte afhankelijk van inhoud Marges schuiven nooit in elkaar Marges van geneste elementen kunnen uit hun container schuiven Voorkomen met border of padding op container width en height height: content kan hoger en breder zijn dan container Correct browsergedrag: overflow min-width, min-height max-width, max-height boxmodel_widthenheight.html

Marges en margin-collapsing :

blockelementen:

100% breed

vertikale marges schuiven in elkaar

inline elementen, floating elements

Breedte afhankelijk van inhoud

Marges schuiven nooit in elkaar

Marges van geneste elementen kunnen uit hun container schuiven

Voorkomen met border of padding op container

width en height

height: content kan hoger en breder zijn dan container

Correct browsergedrag: overflow

min-width, min-height

max-width, max-height

boxmodel_widthenheight.html

Maateenheden screen pixels favoriet voor vele webdesigners (makkelijk) ! ook tekst in pixel vastleggen ! accessibility em relatief tov font-size => grote flexibiliteit welke fontsize? size.html em voor font-size: tov font-size van parent % tov width van contextelement sleutelwoorden small, xx-large print pt, cm, in, ...: media=&quot;screen&quot; @media screen, projection

screen

pixels

favoriet voor vele webdesigners (makkelijk)

! ook tekst in pixel vastleggen

! accessibility

em

relatief tov font-size => grote flexibiliteit

welke fontsize? size.html

em voor font-size: tov font-size van parent

% tov width van contextelement

sleutelwoorden

small, xx-large

print

pt, cm, in, ...:

Font size font small: 13px x-small: 10px medium: 16px (in principe default) fonts ems en % 62.5% (=10px) => 2em: 20px =>1.2em: 12px Tip: voorkomen van nesting-problemen ul: 0.8em ul ul : 100%

font

small: 13px

x-small: 10px

medium: 16px (in principe default)

fonts ems en %

62.5% (=10px)

=> 2em: 20px

=>1.2em: 12px

Tip: voorkomen van nesting-problemen

ul: 0.8em

ul ul : 100%

Fonts en browsers happy screenshots

happy screenshots

Fonts en line-height default meestal ok belangrijk bij hover-effecten met font-weight of font-size wijzigingen met of zonder maateenheid p {font: 10px/1.2em Helvetica, sans-serif; => line-height : 12px div {font-size:10px;line-height: 1.2em } p {font-size: 2em } => line-height van p: 12px div {font-size:10px;line-height: 1.2 } p {font-size: 2em ;} => line-height van p: 24px line-height.html

default meestal ok

belangrijk bij hover-effecten met font-weight of font-size wijzigingen

met of zonder maateenheid

p {font: 10px/1.2em Helvetica, sans-serif;

=> line-height : 12px

div {font-size:10px;line-height: 1.2em }

p {font-size: 2em }

=> line-height van p: 12px

div {font-size:10px;line-height: 1.2 }

p {font-size: 2em ;}

=> line-height van p: 24px

line-height.html

Floating en positioning in vergelijking met de meeste css steile leercurve veel misvattingen crossbrowser-frustraties positioning_basics.html

in vergelijking met de meeste css

steile leercurve

veel misvattingen

crossbrowser-frustraties

positioning_basics.html

Floating: theorie ~ html: att. align=&quot;left|right&quot; bij img float: left right none clear:

~ html: att. align=&quot;left|right&quot; bij img

float:

left

right

none

clear:

Floating element zit niet meer in normale flow containing element volgt hoogte van float binnenin niet bij overlap met andere content: inline: bovenop omliggende inhoud block: tekst bovenop omliggende inhoud achtergrond achter omliggende inhoud floating1.html

element zit niet meer in normale flow

containing element volgt hoogte van float binnenin niet

bij overlap met andere content:

inline: bovenop omliggende inhoud

block:

tekst bovenop omliggende inhoud

achtergrond achter omliggende inhoud

floating1.html

Floating breedte? SPEC: &quot;A floated box must have an explicit width...&quot; autoshrink Boxmodel geldt ook hier indien voldoende ruimte: naast elkaar op zelfde hoogte floating elementen: steeds block maar: vertikale marges schuiven niet in elkaar clear: left | right | both | none floating2.html

breedte?

SPEC: &quot;A floated box must have an explicit width...&quot;

autoshrink

Boxmodel geldt ook hier

indien voldoende ruimte: naast elkaar op zelfde hoogte

floating elementen: steeds block

maar: vertikale marges schuiven niet in elkaar

clear: left | right | both | none

floating2.html

Positioning position position: static position: absolute position: relative position: fixed offset top: maateenheid left: maateenheid right: maateenheid bottom: maateenheid width & height stacking order z-index

position

position: static

position: absolute

position: relative

position: fixed

offset

top: maateenheid

left: maateenheid

right: maateenheid

bottom: maateenheid

width & height

stacking order

z-index

position: static default

default

position: absolute element wordt weggeknipt uit de normale flow ruimte van element wordt ingenomen alsof het niet bestond Gepositioneerd element komt in aparte laag offset berekend vanaf containing block border van viewport indien geen ancestor met position(~body) ofwel border van gepositioneerde ancestor (relatief of absoluut) normale positie indien geen offset positioning_absoluut.html waarden kunnen theoretisch impliciet zijn vb: auto-breedte en auto-hoogte top: 20px;left:1em;right:15px;bottom:0; IE < 7 heeft hier problemen mee

element wordt weggeknipt uit de normale flow

ruimte van element wordt ingenomen alsof het niet bestond

Gepositioneerd element komt in aparte laag

offset berekend vanaf containing block

border van viewport indien geen ancestor met position(~body)

ofwel border van gepositioneerde ancestor

(relatief of absoluut)

normale positie indien geen offset

positioning_absoluut.html

waarden kunnen theoretisch impliciet zijn

vb: auto-breedte en auto-hoogte

top: 20px;left:1em;right:15px;bottom:0;

IE < 7 heeft hier problemen mee

position: relative ingenomen ruimte van het element in de normale flow blijft bewaard. offset berekend vanaf normale positie vermijd inline element als ancestor voor verdere positionering positioning_relatief.html

ingenomen ruimte van het element in de normale flow blijft bewaard.

offset berekend vanaf normale positie

vermijd inline element als ancestor voor verdere positionering

positioning_relatief.html

position: fixed speciale vorm van absolute positionering containing block is steeds viewport / html element beweegt niet mee bij scrolling binnen een pagina. bij afdrukken: fixed element moet op elke pagina positioning_fixed.html

speciale vorm van absolute positionering

containing block is steeds viewport / html

element beweegt niet mee bij scrolling binnen een pagina.

bij afdrukken:

fixed element moet op elke pagina

positioning_fixed.html

z-index: stacking order stacking order bij gepositioneerde elementen: overlap is mogelijk default: verder in document: bovenop vorig element gepostioneerd element kan z-index krijgen hogere index = hogere laag html (document): initiële stacking context gepositioneerd element kan lokale stacking context creëren z-index <> auto negatieve z-index is mogelijk positioning_zindex.html

stacking order bij gepositioneerde elementen:

overlap is mogelijk

default: verder in document: bovenop vorig element

gepostioneerd element kan z-index krijgen

hogere index = hogere laag

html (document): initiële stacking context

gepositioneerd element kan lokale stacking context creëren

z-index <> auto

negatieve z-index is mogelijk

positioning_zindex.html

Verbergen van elementen display: none ook screenreader negeert dit visibility:hidden accessibility text-indent: -9999px; left: -9999px;

display: none ook screenreader negeert dit

visibility:hidden

accessibility

text-indent: -9999px;

left: -9999px;

overflow overflow: visible (default) hidden scroll auto overflow.html auto: container met geneste float volgt de hoogte van de float

overflow:

visible (default)

hidden

scroll

auto

overflow.html

auto: container met geneste float volgt de hoogte van de float

clip clip enkel voor absoluut gepositioneerde elementen div { clip: rect(5px, 40px, 45px, 5px) } div { clip: rect(5px 40px 45px 5px) } IE: W3C:

clip

enkel voor absoluut gepositioneerde elementen

Positionering en paginalayout De praktijk

Navigaties met lijsten horizontaal navigatie_horizontaal.html ofwel: floating li's ofwel: display:inline denk aan verschillend boxmodel vr inline vs block elementen vertikaal navigatie_vertikaal.html a als knop met mouseover en mousedown-effect a met display: block (hack voor IE) ! denk aan paddings en borders bij breedte en hoogte

horizontaal navigatie_horizontaal.html

ofwel: floating li's

ofwel: display:inline

denk aan verschillend boxmodel vr inline vs block elementen

vertikaal

navigatie_vertikaal.html

a als knop met mouseover en mousedown-effect

a met display: block (hack voor IE)

! denk aan paddings en borders bij breedte en hoogte

Navigatie met afbeelding(en) tab-effect: take 1 navigatie_rollover.html

tab-effect: take 1

Navigatie met afbeelding(en) tab-effect: take 2 lijn onder © Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

tab-effect: take 2

lijn onder

© Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

Navigatie: sliding doors techniek tab-effect: take 3 li en a met background-image navigatie_rollover_ sliding.html

tab-effect: take 3

li en a met background-image

Ahtergrond - afbeelding(en) meer dan nodig meer dan nodig gewenste breedte

Fotogallerij met lijst layout_gallery.html <ul id=&quot;albumlist&quot;> <li><img src=&quot;images/thumb1.jpg&quot; alt=&quot;deisgn 1&quot; />design 1</li> <li><img src=&quot;images/thumb2.jpg&quot; alt=&quot;deisgn 2&quot; />design 2</li> <li><img src=&quot;images/thumb3.jpg&quot; alt=&quot;design 3&quot; />design 3</li> <li><img src=&quot;images/thumb4.jpg&quot; alt=&quot;design 4&quot; />design 4</li> <li><img src=&quot;images/thumb5.jpg&quot; alt=&quot;design 5&quot; />design 5</li> <li><img src=&quot;images/thumb6.jpg&quot; alt=&quot;design 6&quot; />design 6</li> <li><img src=&quot;images/thumb7.jpg&quot; alt=&quot;design 7&quot; />design 7</li> <li><img src=&quot;images/thumb8.jpg&quot; alt=&quot;design 8&quot; />design 8</li> </ul>

layout_gallery.html

Floating layout floating element moet expliciete breedte hebben floating in margin en padding of border layout _ 2col_float.html variant meerdere floats naast elkaar (vaste breedte)

floating element moet expliciete breedte hebben

floating in margin en padding of border

layout _ 2col_float.html

variant

meerdere floats naast elkaar (vaste breedte)

Floating layout 25%+75%+ 1px border-left = >100% wrapperdivs border:0, margin:0; padding:0

25%+75%+ 1px border-left = >100%

wrapperdivs

border:0, margin:0; padding:0

Floating layout clear steeds alle voorgaande floats extra container met float clear op footer of container met overflow:auto einde van de float

clear

steeds alle voorgaande floats

extra container met float

clear op footer of container met overflow:auto

Gepositioneerde layout absolute of fixed inhoud met margin, padding of border layout_3col_abspos.html

absolute of fixed

inhoud met margin, padding of border

layout_3col_abspos.html

Gepositioneerde layout ook hier rekening houden met boxmodel containingblock bepaalt offset container-div: position:relative; risico op overlap

ook hier rekening houden met boxmodel

containingblock bepaalt offset

container-div: position:relative;

risico op overlap

Footer onderaan document position: absolute; bottom: 0 ? tov viewport niet het document oplossing: wrapper en footer absoluut gepositioneerd layout_footer.html + IE<6 workaround html, body, #wrapper { min-height: 100%;} #wrapper{ position: absolute; top: 0; left: 0;} #footer { position: absolute; [meer css]}

position: absolute; bottom: 0 ?

tov viewport niet het document

oplossing:

wrapper en footer absoluut gepositioneerd

layout_footer.html

+ IE<6 workaround

Liquid en zoom layout procenten en em voor fonts, widths, borders, padding, ... denk aan boxmodel bij floats min-width, max-width IE (underscore-hack, any selector (*) ) zoom-emulatie: probleem met fixed fonts in IE <7 relatieve fontsize op body 62.5%; kolombreedtes, andere fonts, ... uitdrukken in em en % tov basis lettergrootte meeste gebruikers kennen de textmanipulatie menus niet

procenten en em voor fonts, widths, borders, padding, ...

denk aan boxmodel bij floats

min-width, max-width

IE (underscore-hack, any selector (*) )

zoom-emulatie: probleem met fixed fonts in IE <7

relatieve fontsize op body

62.5%;

kolombreedtes, andere fonts, ... uitdrukken in em en % tov basis lettergrootte

meeste gebruikers kennen de textmanipulatie menus niet

Faux columns met afbeelding op achtergrond layout_fauxcolumn.html

met afbeelding op achtergrond

layout_fauxcolumn.html

Faux column liquid basis floating layout 28%+content+30% layout_fauxcolumn_liquid.html © Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

basis floating layout

28%+content+30%

layout_fauxcolumn_liquid.html

Faux column liquid brede achtergrondafbeelding: 2000px achtergrond moet 70% van links: 1400/2000*100 background: url(img/fauxcolumn_right.gif) repeat-y 70% 0; achtergrond moet 28% van links: 560/2000*100 background: url(img/fauxcolumn_right.gif) repeat-y 28% 0; 2000px 1400px 600px 560 640px transparant

brede achtergrondafbeelding: 2000px

achtergrond moet 70% van links: 1400/2000*100

background: url(img/fauxcolumn_right.gif) repeat-y 70% 0;

achtergrond moet 28% van links: 560/2000*100

background: url(img/fauxcolumn_right.gif) repeat-y 28% 0;

Negative margin techniek omgekeerde document volgorde eenvoudige oplossing voor clearingprobleem maar nadelig voor toegankelijkheid layout_negative_margin.html

omgekeerde document volgorde

eenvoudige oplossing voor clearingprobleem

maar nadelig voor toegankelijkheid

layout_negative_margin.html

Alternate styles meerdere css mogelijk rel = &quot;alternate stylesheet&quot; title=&quot;stijlnaam&quot; styleswitcher in browser javascript <a href=&quot;javascript:;&quot; onclick=&quot; setActiveStyleSheet('2 kolommen'); return false;&quot;>2 cols</a> layout.html

meerdere css mogelijk

rel = &quot;alternate stylesheet&quot; title=&quot;stijlnaam&quot;

styleswitcher in browser

javascript

<a href=&quot;javascript:;&quot; onclick=&quot; setActiveStyleSheet('2 kolommen'); return false;&quot;>2 cols</a>

layout.html

Problemen en oplossingen

Trouble in paradise bugs en spec overtredingen ...and the winner is &quot;IE WIN&quot; IE6: meest gebruikte browser ? http://marketshare.hitslink.com/report.aspx?qprid=2 IE7: veel problemen opgelost, maar niet alles oudere browsers IE5, 5.5: dalend marktaandeel IE/MAC: uitstervend NS 4.7: nostalgie ... FF, Opera, Safari (nu ook Win), Camino, Konqueror, Mozilla, ... verschillende OS => test, test, test workarounds hacks en filters indien nodig http://tredosoft.com/Multiple_IE

bugs en spec overtredingen

...and the winner is &quot;IE WIN&quot;

IE6: meest gebruikte browser ?

http://marketshare.hitslink.com/report.aspx?qprid=2

IE7: veel problemen opgelost, maar niet alles

oudere browsers

IE5, 5.5: dalend marktaandeel

IE/MAC: uitstervend

NS 4.7: nostalgie

...

FF, Opera, Safari (nu ook Win), Camino, Konqueror, Mozilla, ...

verschillende OS

=> test, test, test

workarounds

hacks en filters indien nodig

http://tredosoft.com/Multiple_IE

Internet Explorer float-bugs positioning-bugs overtredingen van de standaard autostretch van container rond floats dimensieproblemen <IE6: foute implementatie van boxmodel Tantek hack IE6: doctypeswitching: quirksmode <IE7: heel wat bugs en overtredingen van de specs IE7: nog niet bugvrij en evenmin volledig volgens de specs IE8: Looking good

float-bugs

positioning-bugs

overtredingen van de standaard

autostretch van container rond floats

dimensieproblemen

<IE6: foute implementatie van boxmodel

Tantek hack

IE6: doctypeswitching: quirksmode

<IE7: heel wat bugs en overtredingen van de specs

IE7: nog niet bugvrij en evenmin volledig volgens de specs

IE8: Looking good

IE bugs peekaboo bug IE6Magic  komt vaak voor bij gebruik van footer bug verdwijnt na uitlokken van foutief IE nested float gedrag demo: floating _Peekaboo.html guillotine bug Nog meer IE6 – trucks demo: floating_Guillotine.html double margin bug www.positioniseverything.net

peekaboo bug

IE6Magic 

komt vaak voor bij gebruik van footer

bug verdwijnt na uitlokken van foutief IE nested float gedrag

demo: floating _Peekaboo.html

guillotine bug

Nog meer IE6 – trucks

demo: floating_Guillotine.html

double margin bug

www.positioniseverything.net

Don’t let the bugs bite to hack or not to hack &quot; T he complexity monster has reappeared, right in the center of modern Web development. Nowadays it doesn’t manifest itself as an endlessly nested table, but as an endlessly complicated CSS hack.&quot; (Peter-Paul Koch) oplossingen: * en *+ workaround underscore hack voor IE Win backslash-hack (simplified Holly hack) IE conditionele CSS (mijn keuze)

to hack or not to hack &quot; T he complexity monster has reappeared, right in the center of modern Web development. Nowadays it doesn’t manifest itself as an endlessly nested table, but as an endlessly complicated CSS hack.&quot; (Peter-Paul Koch)

oplossingen:

* en *+ workaround

underscore hack voor IE Win

backslash-hack (simplified Holly hack)

IE conditionele CSS (mijn keuze)

Hoe het begon: de boxmodel hack target IE<6 beruchte hack door Tantek Celik be nice to Opera boxmodel2.html width: 150px; /*waarde voor IE Win < 6 */ padding: 10px; border: 1px solid #000; voice-family: &quot;&quot;}&quot;&quot;; voice-family:inherit; width:128px; /*correcte waarde vr andere browsers*/ html > body #box {width:128px;}

target IE<6

beruchte hack door Tantek Celik

be nice to Opera

boxmodel2.html

width: 150px; /*waarde voor IE Win < 6 */

padding: 10px;

border: 1px solid #000;

voice-family: &quot;&quot;}&quot;&quot;;

voice-family:inherit;

width:128px; /*correcte waarde vr andere browsers*/

IE hasLayout -property “ hasLayout” is een IE/Win concept dat bepaalt hoe elementen hun inhoud visualizeren, interageren met andere elementen reageren op application/user events. element “has layout” indien hasLayout true css-elementen kunnen de property van waarde laten veranderen IE hasLayout

“ hasLayout” is een IE/Win concept dat bepaalt hoe elementen

hun inhoud visualizeren,

interageren met andere elementen

reageren op application/user events.

element “has layout” indien hasLayout true

css-elementen kunnen de property van waarde laten veranderen

IE hasLayout -property mogelijke gevolgen van hasLayout = false heel aantal IE float bugs. blokken die basis properties fout invullen. collapsing margins tussen een container en de afstammelingen problemen bij de weergave van lijsten. verschillen in de positionering van achtergronden foute weergave bij gebruik van scripting aantal bugs drastisch omlaag (ook IE7) indien hasLayout = true

mogelijke gevolgen van hasLayout = false

heel aantal IE float bugs.

blokken die basis properties fout invullen.

collapsing margins tussen een container en de afstammelingen

problemen bij de weergave van lijsten.

verschillen in de positionering van achtergronden

foute weergave bij gebruik van scripting

aantal bugs drastisch omlaag (ook IE7) indien hasLayout = true

Oplossingen: backslash hack Voor IE < 6 backslash (“&quot;) is allowed volgens CSS2.1 : valid <= IE 5.x negeert properties met escape karakters voor ander browsers: width = width opmerking dit lukt niet voor cijfers 0-9 en a-f background: red; background: red body {font-size:x-small;font-size:small;

Voor IE < 6

backslash (“&quot;) is allowed volgens CSS2.1 : valid

<= IE 5.x negeert properties met escape karakters

voor ander browsers:

width = width

opmerking

dit lukt niet voor cijfers 0-9 en a-f

background: red;

background: red

body {font-size:x-small;font-size:small;

Oplossingen: * workaround In IE < 7 heeft het html-element een anonieme parent dit geldt voor geen enkele andere browser bijvoorbeeld: vereenvoudigde tantek hack * html #content /* enkel IE < 7 */ { width: 100px; /* IE <6 */ width: 80px; /* IE 6 */ } #content { width: 80px; /*andere browsers*/ padding: 10px; background:red; } In conditionele css kan hiermee ook enkel IE7 gefilterd worden * html .voorbeeld {margin-left:-3px;} /* <7*/ .voorbeeld {margin-left: 0} /*enkel 7*/ Variant enkel voor IE7: *+html .voorbeeld

In IE < 7 heeft het html-element een anonieme parent

dit geldt voor geen enkele andere browser

bijvoorbeeld: vereenvoudigde tantek hack

* html #content /* enkel IE < 7 */ {

width: 100px; /* IE <6 */

width: 80px; /* IE 6 */

}

#content {

width: 80px; /*andere browsers*/

padding: 10px;

background:red;

}

In conditionele css kan hiermee ook enkel IE7 gefilterd worden

* html .voorbeeld {margin-left:-3px;} /* <7*/

.voorbeeld {margin-left: 0} /*enkel 7*/

Variant enkel voor IE7: *+html .voorbeeld

* Workaround voorbeeld IE past regels voor nested floating niet correct toe geneste floats: IE <> Specs bij focus op IE: probleem in andere browsers floating _IE.html

IE past regels voor nested floating niet correct toe

geneste floats: IE <> Specs

bij focus op IE: probleem in andere browsers

floating _IE.html

* Workaround voorbeeld Easyclearing-methode clearing old school clearing div (redundante opmaak) clearing zonder redundante html-code :after (markup toegevoegd aan einde van el) floating_W3C.html .clearme:after { content: &quot;.&quot;; display: block; height: 0; clear: both; visibility: hidden; } /* voor IE <7 */ * html .clearme { height: 1px; } /* voor IE 7*/ *+html .clearme { min-height: 1px;}

Easyclearing-methode

clearing old school

clearing div (redundante opmaak)

clearing zonder redundante html-code

:after (markup toegevoegd aan einde van el)

floating_W3C.html

Oplossingen: Underscore Hack underscore (&quot;_&quot;) is allowed aan begin van CSS selectoren volgens CSS2.1 : valid browsers moeten onbekende CSS negeren IE <7 negeert _ aan begin van property voorbeeld: _height: 300px; genegeerd in alle andere browsers behandeld als height: 300px in IE <7

underscore (&quot;_&quot;) is allowed aan begin van CSS selectoren volgens CSS2.1 : valid

browsers moeten onbekende CSS negeren

IE <7 negeert _ aan begin van property

voorbeeld:

_height: 300px;

genegeerd in alle andere browsers

behandeld als height: 300px in IE <7

Oplossingen: script min- en max- width niet door IE ondersteund. mogelijke oplossing: script * html #box { width:expression(document.body.clientWidth < 740? &quot;740px&quot; :document.body.clientWidth > 1200? &quot;1200px&quot; : &quot;auto&quot;); } geen valide css! Kan enkel in conditionele css

min- en max- width niet door IE ondersteund.

mogelijke oplossing: script

* html #box {

width:expression(document.body.clientWidth < 740? &quot;740px&quot; :document.body.clientWidth > 1200? &quot;1200px&quot; : &quot;auto&quot;);

}

geen valide css!

Kan enkel in conditionele css

Oplossingen: IE conditionele CSS bundeling van IE-specifieke css embedded: <!--[if lte IE 7]> <style> * html .gainlayout { height: 1px; } /*ie<=6*/ *+html .gainlayout { zoom: 1; /*ie7*/} </style><![endif]--> extern <link rel=&quot;stylesheet&quot; href=&quot;allbrowsers.css&quot; type=&quot;text/css&quot; /> <!--[if lte IE 7]> <link rel=&quot;stylesheet&quot; href=&quot;iefix.css&quot; type=&quot;text/css&quot; /> <![endif]-->

bundeling van IE-specifieke css

embedded:

<!--[if lte IE 7]>

<style>

* html .gainlayout { height: 1px; } /*ie<=6*/

*+html .gainlayout { zoom: 1; /*ie7*/}

</style><![endif]-->

extern

<link rel=&quot;stylesheet&quot; href=&quot;allbrowsers.css&quot; type=&quot;text/css&quot; />

<!--[if lte IE 7]>

<link rel=&quot;stylesheet&quot; href=&quot;iefix.css&quot; type=&quot;text/css&quot; />

<![endif]-->

Debug scenario isoleer problemen bij testing gebruik aanwezige tools valideer http://validator.w3.org/ http://jigsaw.w3.org/css-validator/ testen, testen, testen, ....

isoleer problemen bij testing

gebruik aanwezige tools

valideer

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

testen, testen, testen, ....

bronnen - internet www.ohmdesign.be / links.html

www.ohmdesign.be / links.html

bronnen - boeken