Css positioning

Slideshow Transcript

1. Slide 1: CSS positionering Thomas Aertssens 2008 1
2. Slide 2: Alles is gepositioneerd • document volgorde • block vs inline • (x)html Browser defaults • css – width, height, padding, border, margin – display – float – position – overflow – z-index 2
3. Slide 3: Css voor paginalayout • Semantische xhtml-opbouw 3
4. Slide 4: 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 4
5. Slide 5: Css en divs • divs voor de paginaregio's 5
6. Slide 6: 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 6
7. Slide 7: Datatabellen en css tabellen.html 7
8. Slide 8: divs en divitis • zuinig met divs: is er geen ander element? divitis.html • divitis in wysiwyg – visual studio.net – layers in Dreamweaver 8
9. Slide 9: classitis • classitis – geen onnodige classes - contextuele selectoren .navigatie #navigatie li 9
10. Slide 10: Compacte code • gemiddeld 50% minder code – vrijwel alle attributen verdwijnen uit de code <p><font color=\"red\" size=\"+2\" face=\"Arial, sans-serif\">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 10
11. Slide 11: 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 11
12. Slide 12: Compacte code • kul redesign (simulatie) • kul-tabeldesign met • xhtml/css gepositioneerd basis-css redesign 12
13. Slide 13: Overzichtelijke code • voorbeeld: subnavigatie 13
14. Slide 14: Css selectoren: specificiteit • Berekening : (0) 0 0 0 – elk (pseudo-) element : 4de waarde + 1 – elke (pseudo-)class : 3de waarde + 1 – elke id: 2de waarde + 1 • bij gelijk gewicht: documentvolgorde bepalend • inline-stijl: 1ste waarde +1 • !important – krijgt steeds voorrang 14
15. Slide 15: Css selectoren: specificiteit voorbeelden CSS2.1<>CSS2.0 15
16. Slide 16: 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 16
17. Slide 17: Positionering en paginalayout De theorie 17
18. Slide 18: Css voor paginalayout • vorige generatie layouts: tabellen 18
19. Slide 19: Paginalayout: basiselementen • boxmodel • maateenheden • fonts • maatberekening • containing block • floating • positioning 19
20. Slide 20: Boxmodel 20
21. Slide 21: Boxmodel • feitelijke breedte: 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 21
22. Slide 22: Maatberekening • marges: – blockelementen: • 100% breed • vertikale marges schuiven in elkaar – inline elementen, floating elements • Breedte afhankelijk van inhoud • Marges schuiven nooit in elkaar – margin-collapsing • 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 22
23. Slide 23: 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 media=\"screen\" – pt, cm, in, ...: @media screen, projection 23
24. Slide 24: 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% 24
25. Slide 25: Fonts en browsers • happy screenshots 25
26. Slide 26: 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 26
27. Slide 27: Floating en positioning • in vergelijking met de meeste css – steile leercurve • veel misvattingen • crossbrowser-frustraties positioning_basics.html 27
28. Slide 28: Floating: theorie • ~ html: att. align=\"left|right\" bij img • float: – left – right – none • clear: 28
29. Slide 29: Floating • element zit niet meer in normale flow • bij overlap met andere content: • inline: bovenop omliggende inhoud • block: – tekst bovenop omliggende inhoud – achtergrond achter omliggende inhoud • containing element volgt hoogte van float binnenin niet floating1.html 29
30. Slide 30: Floating • breedte? – SPEC: \"A floated box must have an explicit width...\" – autoshrink • width ≠ totale breedte (boxmodel) • 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 30
31. Slide 31: 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 31
32. Slide 32: position: static • default 32
33. Slide 33: 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 33
34. Slide 34: 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 34
35. Slide 35: 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 35
36. Slide 36: 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 36
37. Slide 37: Verbergen van elementen • display: none ook screenreader negeert dit • visibility:hidden • accessibility – text-indent: -9999px; – left: -9999px; 37
38. Slide 38: overflow • overflow: – visible (default) – hidden – scroll – Auto overflow.html • auto: container met geneste float volgt de hoogte van de float 38
39. Slide 39: Positionering en paginalayout De praktijk 40
40. Slide 40: 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 41
41. Slide 41: Navigatie met afbeelding(en) • tab-effect: take 1 navigatie_rollover.html 42
42. Slide 42: 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 43
43. Slide 43: Navigatie: sliding doors techniek • tab-effect: take 3 navigatie_rollover_sliding.html • li en a met background-image 44
44. Slide 44: Ahtergrond - afbeelding(en) meer dan gewenste breedte nodig meer dan nodig 45
45. Slide 45: Fotogallerij met lijst <ul id=\"albumlist\"> <li><img src=\"images/thumb1.jpg\" alt=\"deisgn 1\" />design 1</li> <li><img src=\"images/thumb2.jpg\" alt=\"deisgn 2\" />design 2</li> <li><img src=\"images/thumb3.jpg\" alt=\"design 3\" />design 3</li> <li><img src=\"images/thumb4.jpg\" alt=\"design 4\" />design 4</li> <li><img src=\"images/thumb5.jpg\" alt=\"design 5\" />design 5</li> <li><img src=\"images/thumb6.jpg\" alt=\"design 6\" />design 6</li> <li><img src=\"images/thumb7.jpg\" alt=\"design 7\" />design 7</li> <li><img src=\"images/thumb8.jpg\" alt=\"design 8\" />design 8</li> </ul> layout_gallery.html 46
46. Slide 46: 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) 47
47. Slide 47: Floating layout • 25%+75%+ 1px border-left = >100% • wrapperdivs – border:0, margin:0; padding:0 48
48. Slide 48: Floating layout • clear – steeds alle voorgaande floats einde van de float extra container met float – clear op footer of container met overflow:auto 49
49. Slide 49: Gepositioneerde layout • absolute of fixed • inhoud met margin, padding of border layout_3col_abspos.html 50
50. Slide 50: Gepositioneerde layout • ook hier rekening houden met boxmodel • containingblock bepaalt offset container-div: position:relative; • risico op overlap 51
51. Slide 51: Footer onderaan document • position: absolute; bottom: 0 ? – tov viewport niet het document • oplossing: – wrapper en footer absoluut gepositioneerd html, body, #wrapper { min-height: 100%;} #wrapper{ position: absolute; top: 0; left: 0;} #footer { position: absolute; [meer css]} layout_footer.html + IE<6 workaround 52
52. Slide 52: 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 53
53. Slide 53: Faux columns • met afbeelding op achtergrond layout_fauxcolumn.html 54
54. Slide 54: 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 55
55. Slide 55: Faux column liquid • brede achtergrondafbeelding: 2000px 2000px 1400px 600px • achtergrond moet 70% van links: 1400/2000*100 background: url(img/fauxcolumn_right.gif) repeat-y 70% 0; 560 640px transparant • achtergrond moet 28% van links: 560/2000*100 background: url(img/fauxcolumn_right.gif) repeat-y 28% 0; 56
56. Slide 56: Negative margin techniek • omgekeerde document volgorde • eenvoudige oplossing voor clearingprobleem • maar nadelig voor toegankelijkheid layout_negative_margin.html 57
57. Slide 57: Alternate styles • meerdere css mogelijk rel = \"alternate stylesheet\" title=\"stijlnaam\" – styleswitcher in browser – javascript <a href=\"javascript:;\" onclick=\" setActiveStyleSheet('2 kolommen'); return false;\">2 cols</a> layout.html 58
58. Slide 58: Problemen en oplossingen 59
59. Slide 59: Trouble in paradise • bugs en spec overtredingen ...and the winner is \"IE WIN\" • 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 60
60. Slide 60: 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 61
61. Slide 61: IE bugs • peekaboo bug – IE Magic ☺ – 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 IE – trucks demo: floating_Guillotine.html • double margin bug www.positioniseverything.net 62
62. Slide 62: Don’t let the bugs bite • to hack or not to hack \"The 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.\" (Peter-Paul Koch) • oplossingen: – * en *+ workaround – underscore hack voor IE Win – backslash-hack (simplified Holly hack) – IE conditionele CSS (mijn keuze) 63
63. Slide 63: Hoe het begon: de boxmodel hack • target IE<6 • beruchte hack door Tantek Celik width: 150px; /*waarde voor IE Win < 6 */ padding: 10px; border: 1px solid #000; voice-family: \"\\\"}\\\"\"; voice-family:inherit; width:128px; /*correcte waarde vr andere browsers*/ be nice to Opera html > body #box {width:128px;} boxmodel2.html (bekijk in IE<6) 64
64. Slide 64: 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 65
65. Slide 65: 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 66
66. Slide 66: Oplossingen: backslash hack • backslash (“\\\") is allowed volgens CSS2.1 : valid • <= IE 5.x negeert properties met escape karakters • voor ander browsers: – w\\idth = width • opmerking – dit lukt niet voor cijfers 0-9 en a-f b\\ackground: red; bac\\kground: red body {font-size:x-small;f\\ont-size:small; 67
67. Slide 67: Oplossingen: * workaround • in IE 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 */ w\\idth: 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*/ • IE7 ondersteun wel *+html .voorbeeld 68
68. Slide 68: * 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 69
69. Slide 69: * Workaround voorbeeld • gewenste effect bereiken: met clear • clearing old school – clearing div (redundante opmaak) • clearing zonder redundante html-code – :after (markup toegevoegd aan einde van el) .clearme:after { /* voor IE <7 \\*/ content: \".\"; * html .clearme { display: block; height: 1px; height: 0; } clear: both; /* voor IE 7*/ visibility: hidden; *+html .clearme { } min-height: 1px;} floating_W3C.html 70
70. Slide 70: Oplossingen: Underscore Hack • underscore (\"_\") 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 71
71. Slide 71: Oplossingen: min-width, max-width • min- en max- width niet door IE ondersteund. • mogelijke oplossing: script • geen valide css! – Kan enkel in conditionele css * html #box { width:expression(document.body.clientWidth < 740? \"740px\" :document.body.clientWidth > 1200? \"1200px\" : \"auto\"); } 72
72. Slide 72: 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=\"stylesheet\" href=\"allbrowsers.css\" type=\"text/css\" /> <!--[if lte IE 7]> <link rel=\"stylesheet\" href=\"iefix.css\" type=\"text/css\" /> <![endif]--> 73
73. Slide 73: Debug scenario • isoleer problemen bij testing • gebruik aanwezige tools • valideer – http://validator.w3.org/ – http://jigsaw.w3.org/css-validator/ • testen, testen, testen, .... 74
74. Slide 74: bronnen - internet www.ohmdesign.be/links.html 75
75. Slide 75: bronnen - boeken 76