Css positioning

17,013 views
16,826 views

Published on

Css paginalayout: absolute positioning, floating, liquid layout, "faux columns", ...
Problemen en oplossingen

Published in: Economy & Finance
1 Comment
23 Likes
Statistics
Notes
No Downloads
Views
Total views
17,013
On SlideShare
0
From Embeds
0
Number of Embeds
2,256
Actions
Shares
0
Downloads
0
Comments
1
Likes
23
Embeds 0
No embeds

No notes for slide

Css positioning

  1. 1. CSS positionering Thomas Aertssens 2008-2009
  2. 2. Alles is gepositioneerd <ul><li>document volgorde </li></ul><ul><li>block vs inline </li></ul><ul><li>(x)html Browser defaults </li></ul><ul><li>css </li></ul><ul><ul><li>width, height, padding, border, margin </li></ul></ul><ul><ul><li>display </li></ul></ul><ul><ul><li>float </li></ul></ul><ul><ul><li>position </li></ul></ul><ul><ul><li>overflow </li></ul></ul><ul><ul><li>z-index </li></ul></ul>
  3. 3. Css voor paginalayout <ul><li>Semantische xhtml-opbouw </li></ul>
  4. 4. Design benadering <ul><li>scheiding semantiek en design </li></ul><ul><li>valide xhtml </li></ul><ul><li>semantische namen voor class en id </li></ul><ul><ul><li>navigatie ipv linkerkolom </li></ul></ul><ul><ul><li>nieuw ipv blauw_groot </li></ul></ul><ul><li>less is more </li></ul><ul><ul><li>Hou xhtml en css zo eenvoudig mogelijk </li></ul></ul><ul><li>verschillende css voor verschillende media </li></ul><ul><ul><li>@media </li></ul></ul><ul><li>alternate styles </li></ul><ul><li>toegankelijke pagina's </li></ul>
  5. 5. Css en divs <ul><li>divs voor de paginaregio's </li></ul>
  6. 6. Tabellen zijn toegelaten in xhtml! <ul><li>voor data </li></ul><ul><li>relatie tussen data </li></ul><ul><li>th voor relatie-titels (geen class) </li></ul><ul><li>caption, summary </li></ul><ul><li>enige att in html </li></ul><ul><ul><li>cellspacing wegens onvolmaakte browsers </li></ul></ul>
  7. 7. Datatabellen en css <ul><li>tabellen.html </li></ul>
  8. 8. divs en divitis <ul><li>zuinig met divs: is er geen ander element? </li></ul><ul><li> divitis.html </li></ul><ul><li>divitis in wysiwyg </li></ul><ul><ul><li>visual studio.net </li></ul></ul><ul><ul><li>layers in Dreamweaver </li></ul></ul>
  9. 9. classitis <ul><li>classitis </li></ul><ul><ul><li>geen onnodige classes </li></ul></ul><ul><ul><li>- contextuele selectoren </li></ul></ul><ul><ul><li>.navigatie </li></ul></ul><ul><ul><li>#navigatie li </li></ul></ul>
  10. 10. Compacte code <ul><li>veel minder code </li></ul><ul><ul><li>vrijwel alle attributen verdwijnen uit de code </li></ul></ul><ul><ul><li><p><font color=&quot;red&quot; size=&quot;+2&quot; face=&quot;Arial, sans-serif&quot;>Dit is veeel werk</font></p> </li></ul></ul><ul><li>geen redundante code </li></ul><ul><ul><li>spacer-gifs, tabellen in tabellen, lege p-tags, sequentiële breaks </li></ul></ul><ul><li>overzichtelijke code </li></ul><ul><ul><li>modulaire opbouw </li></ul></ul><ul><li>consequente siteopbouw: templates </li></ul>
  11. 11. Compacte code <ul><li>slashdot: van puur html naar css redesign </li></ul><ul><ul><li>winst zonder css-caching: ~2KB / request </li></ul></ul><ul><ul><li>winst met css-caching: ~9KB / request </li></ul></ul><ul><ul><li>zo'n 50miljoen bez / maand = ~1 612900 / dag </li></ul></ul><ul><ul><li>winst zonder css-caching: ~3.15 GB / dag </li></ul></ul><ul><ul><li>winst met css-caching: ~14 GB / dag </li></ul></ul>
  12. 12. Compacte code <ul><li>kul redesign (simulatie) </li></ul><ul><li>kul - tabeldesign met basis- css </li></ul><ul><li>xhtml / css gepositioneerd redesign </li></ul>
  13. 13. Compacte code = overzichtelijke code <ul><li>voorbeeld: subnavigatie </li></ul>
  14. 14. Css selectoren: specificiteit <ul><li>Berekening : (0) 0 0 0 </li></ul><ul><ul><li>elk (pseudo-) element : 4 de waarde + 1 </li></ul></ul><ul><ul><li>elke (pseudo-)class : 3 de waarde + 1 </li></ul></ul><ul><ul><li>elke id: 2 de waarde + 1 </li></ul></ul><ul><li>bij gelijk gewicht: documentvolgorde bepalend </li></ul><ul><li>inline-stijl: altijd grootste gewicht (1 ste waarde +1) </li></ul><ul><li>!important </li></ul><ul><ul><li>krijgt steeds voorrang </li></ul></ul>
  15. 15. Css selectoren: specificiteit CSS2.1<>CSS2.0 voorbeelden
  16. 16. Tools <ul><li>Firefox (mijn keuze) </li></ul><ul><ul><li>betrouwbare testtool </li></ul></ul><ul><li>Firefox addons </li></ul><ul><ul><li>Web developer toolbar http:// chrispederick.com / </li></ul></ul><ul><ul><ul><li>View source in editor </li></ul></ul></ul><ul><ul><li>html validator </li></ul></ul><ul><ul><li>firebug </li></ul></ul><ul><ul><li>IEtab </li></ul></ul><ul><li>IE web developer toolbar </li></ul>
  17. 17. Positionering en paginalayout De theorie
  18. 18. Css voor paginalayout <ul><li>vorige generatie layouts: tabellen in html </li></ul>
  19. 19. Paginalayout: basiselementen <ul><li>boxmodel </li></ul><ul><li>maateenheden </li></ul><ul><li>fonts </li></ul><ul><li>maatberekening </li></ul><ul><li>containing block </li></ul><ul><li>floating </li></ul><ul><li>positioning </li></ul>
  20. 20. Boxmodel
  21. 21. Boxmodel <ul><li>feitelijke breedte in browser: </li></ul><ul><ul><li>leftmargin+leftborder+leftpadding+content +richtpadding+rightborder+rightmargin </li></ul></ul><ul><ul><li>boxmodel </li></ul></ul><ul><li>auto-invulling van niet-gedefinieerde eigenschappen </li></ul><ul><li>eenheden kunnen ook negatief zijn. </li></ul><ul><li>vb </li></ul><ul><ul><li>margin: 20px; padding:0; auto-width </li></ul></ul><ul><ul><li>margin: 0 auto; width:50% auto-marge L&R </li></ul></ul><ul><li>verschillend voor block en inline elementen </li></ul><ul><li>opgepast met quirksmode -> Gebruik doctype </li></ul>
  22. 22. Maatberekening <ul><li>Marges en margin-collapsing : </li></ul><ul><ul><li>blockelementen: </li></ul></ul><ul><ul><ul><li>100% breed </li></ul></ul></ul><ul><ul><ul><li>vertikale marges schuiven in elkaar </li></ul></ul></ul><ul><ul><li>inline elementen, floating elements </li></ul></ul><ul><ul><ul><li>Breedte afhankelijk van inhoud </li></ul></ul></ul><ul><ul><ul><li>Marges schuiven nooit in elkaar </li></ul></ul></ul><ul><ul><li>Marges van geneste elementen kunnen uit hun container schuiven </li></ul></ul><ul><ul><ul><li>Voorkomen met border of padding op container </li></ul></ul></ul><ul><li>width en height </li></ul><ul><ul><li>height: content kan hoger en breder zijn dan container </li></ul></ul><ul><ul><li>Correct browsergedrag: overflow </li></ul></ul><ul><li>min-width, min-height </li></ul><ul><li>max-width, max-height </li></ul><ul><li>boxmodel_widthenheight.html </li></ul>
  23. 23. Maateenheden <ul><li>screen </li></ul><ul><ul><li>pixels </li></ul></ul><ul><ul><ul><li>favoriet voor vele webdesigners (makkelijk) </li></ul></ul></ul><ul><ul><ul><li>! ook tekst in pixel vastleggen </li></ul></ul></ul><ul><ul><ul><li>! accessibility </li></ul></ul></ul><ul><ul><li>em </li></ul></ul><ul><ul><ul><li>relatief tov font-size => grote flexibiliteit </li></ul></ul></ul><ul><ul><ul><li>welke fontsize? size.html </li></ul></ul></ul><ul><ul><ul><li>em voor font-size: tov font-size van parent </li></ul></ul></ul><ul><ul><li>% tov width van contextelement </li></ul></ul><ul><ul><li>sleutelwoorden </li></ul></ul><ul><ul><ul><li>small, xx-large </li></ul></ul></ul><ul><li>print </li></ul><ul><ul><li>pt, cm, in, ...: </li></ul></ul>media=&quot;screen&quot; @media screen, projection
  24. 24. Font size <ul><li>font </li></ul><ul><ul><li>small: 13px </li></ul></ul><ul><ul><li>x-small: 10px </li></ul></ul><ul><ul><li>medium: 16px (in principe default) </li></ul></ul><ul><li>fonts ems en % </li></ul><ul><ul><li>62.5% (=10px) </li></ul></ul><ul><ul><ul><li>=> 2em: 20px </li></ul></ul></ul><ul><ul><ul><li>=>1.2em: 12px </li></ul></ul></ul><ul><ul><li>Tip: voorkomen van nesting-problemen </li></ul></ul><ul><ul><ul><li>ul: 0.8em </li></ul></ul></ul><ul><ul><ul><li>ul ul : 100% </li></ul></ul></ul>
  25. 25. Fonts en browsers <ul><li>happy screenshots </li></ul>
  26. 26. Fonts en line-height <ul><li>default meestal ok </li></ul><ul><li>belangrijk bij hover-effecten met font-weight of font-size wijzigingen </li></ul><ul><li>met of zonder maateenheid </li></ul><ul><ul><li>p {font: 10px/1.2em Helvetica, sans-serif; </li></ul></ul><ul><ul><li>=> line-height : 12px </li></ul></ul><ul><ul><li>div {font-size:10px;line-height: 1.2em } </li></ul></ul><ul><ul><li>p {font-size: 2em } </li></ul></ul><ul><ul><li>=> line-height van p: 12px </li></ul></ul><ul><ul><li>div {font-size:10px;line-height: 1.2 } </li></ul></ul><ul><ul><li>p {font-size: 2em ;} </li></ul></ul><ul><ul><li>=> line-height van p: 24px </li></ul></ul><ul><li>line-height.html </li></ul>
  27. 27. Floating en positioning <ul><li>in vergelijking met de meeste css </li></ul><ul><ul><li>steile leercurve </li></ul></ul><ul><li>veel misvattingen </li></ul><ul><li>crossbrowser-frustraties </li></ul><ul><li>positioning_basics.html </li></ul>
  28. 28. Floating: theorie <ul><li>~ html: att. align=&quot;left|right&quot; bij img </li></ul><ul><li>float: </li></ul><ul><ul><li>left </li></ul></ul><ul><ul><li>right </li></ul></ul><ul><ul><li>none </li></ul></ul><ul><li>clear: </li></ul>
  29. 29. Floating <ul><li>element zit niet meer in normale flow </li></ul><ul><li>containing element volgt hoogte van float binnenin niet </li></ul><ul><li>bij overlap met andere content: </li></ul><ul><ul><ul><li>inline: bovenop omliggende inhoud </li></ul></ul></ul><ul><ul><ul><li>block: </li></ul></ul></ul><ul><ul><ul><ul><li>tekst bovenop omliggende inhoud </li></ul></ul></ul></ul><ul><ul><ul><ul><li>achtergrond achter omliggende inhoud </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>floating1.html </li></ul></ul></ul></ul></ul>
  30. 30. Floating <ul><li>breedte? </li></ul><ul><ul><li>SPEC: &quot;A floated box must have an explicit width...&quot; </li></ul></ul><ul><ul><li>autoshrink </li></ul></ul><ul><li>Boxmodel geldt ook hier </li></ul><ul><li>indien voldoende ruimte: naast elkaar op zelfde hoogte </li></ul><ul><li>floating elementen: steeds block </li></ul><ul><ul><li>maar: vertikale marges schuiven niet in elkaar </li></ul></ul><ul><li>clear: left | right | both | none </li></ul><ul><li>floating2.html </li></ul>
  31. 31. Positioning <ul><li>position </li></ul><ul><ul><li>position: static </li></ul></ul><ul><ul><li>position: absolute </li></ul></ul><ul><ul><li>position: relative </li></ul></ul><ul><ul><li>position: fixed </li></ul></ul><ul><li>offset </li></ul><ul><ul><li>top: maateenheid </li></ul></ul><ul><ul><li>left: maateenheid </li></ul></ul><ul><ul><li>right: maateenheid </li></ul></ul><ul><ul><li>bottom: maateenheid </li></ul></ul><ul><li>width & height </li></ul><ul><li>stacking order </li></ul><ul><ul><li>z-index </li></ul></ul>
  32. 32. position: static <ul><li>default </li></ul>
  33. 33. position: absolute <ul><li>element wordt weggeknipt uit de normale flow </li></ul><ul><li>ruimte van element wordt ingenomen alsof het niet bestond </li></ul><ul><li>Gepositioneerd element komt in aparte laag </li></ul><ul><li>offset berekend vanaf containing block </li></ul><ul><ul><li>border van viewport indien geen ancestor met position(~body) </li></ul></ul><ul><ul><li>ofwel border van gepositioneerde ancestor </li></ul></ul><ul><ul><ul><li>(relatief of absoluut) </li></ul></ul></ul><ul><ul><li>normale positie indien geen offset </li></ul></ul><ul><ul><li>positioning_absoluut.html </li></ul></ul><ul><li>waarden kunnen theoretisch impliciet zijn </li></ul><ul><ul><li>vb: auto-breedte en auto-hoogte </li></ul></ul><ul><ul><li>top: 20px;left:1em;right:15px;bottom:0; </li></ul></ul><ul><ul><li>IE < 7 heeft hier problemen mee </li></ul></ul>
  34. 34. position: relative <ul><li>ingenomen ruimte van het element in de normale flow blijft bewaard. </li></ul><ul><li>offset berekend vanaf normale positie </li></ul><ul><ul><li>vermijd inline element als ancestor voor verdere positionering </li></ul></ul><ul><li>positioning_relatief.html </li></ul>
  35. 35. position: fixed <ul><li>speciale vorm van absolute positionering </li></ul><ul><li>containing block is steeds viewport / html </li></ul><ul><li>element beweegt niet mee bij scrolling binnen een pagina. </li></ul><ul><li>bij afdrukken: </li></ul><ul><ul><li>fixed element moet op elke pagina </li></ul></ul><ul><li>positioning_fixed.html </li></ul>
  36. 36. z-index: stacking order <ul><li>stacking order bij gepositioneerde elementen: </li></ul><ul><ul><li>overlap is mogelijk </li></ul></ul><ul><ul><li>default: verder in document: bovenop vorig element </li></ul></ul><ul><li>gepostioneerd element kan z-index krijgen </li></ul><ul><ul><li>hogere index = hogere laag </li></ul></ul><ul><li>html (document): initiële stacking context </li></ul><ul><li>gepositioneerd element kan lokale stacking context creëren </li></ul><ul><ul><li>z-index <> auto </li></ul></ul><ul><li>negatieve z-index is mogelijk </li></ul><ul><li>positioning_zindex.html </li></ul>
  37. 37. Verbergen van elementen <ul><li>display: none ook screenreader negeert dit </li></ul><ul><li>visibility:hidden </li></ul><ul><li>accessibility </li></ul><ul><ul><li>text-indent: -9999px; </li></ul></ul><ul><ul><li>left: -9999px; </li></ul></ul>
  38. 38. overflow <ul><li>overflow: </li></ul><ul><ul><li>visible (default) </li></ul></ul><ul><ul><li>hidden </li></ul></ul><ul><ul><li>scroll </li></ul></ul><ul><ul><li>auto </li></ul></ul><ul><ul><li>overflow.html </li></ul></ul><ul><li>auto: container met geneste float volgt de hoogte van de float </li></ul>
  39. 39. clip <ul><li>clip </li></ul><ul><ul><li>enkel voor absoluut gepositioneerde elementen </li></ul></ul>div { clip: rect(5px, 40px, 45px, 5px) } div { clip: rect(5px 40px 45px 5px) } IE: W3C:
  40. 40. Positionering en paginalayout De praktijk
  41. 41. Navigaties met lijsten <ul><li>horizontaal navigatie_horizontaal.html </li></ul><ul><ul><li>ofwel: floating li's </li></ul></ul><ul><ul><li>ofwel: display:inline </li></ul></ul><ul><ul><ul><li>denk aan verschillend boxmodel vr inline vs block elementen </li></ul></ul></ul><ul><li>vertikaal </li></ul><ul><ul><li>navigatie_vertikaal.html </li></ul></ul><ul><li>a als knop met mouseover en mousedown-effect </li></ul><ul><ul><li>a met display: block (hack voor IE) </li></ul></ul><ul><ul><li>! denk aan paddings en borders bij breedte en hoogte </li></ul></ul>
  42. 42. Navigatie met afbeelding(en) <ul><li>tab-effect: take 1 </li></ul>navigatie_rollover.html
  43. 43. Navigatie met afbeelding(en) <ul><li>tab-effect: take 2 </li></ul><ul><ul><li>lijn onder </li></ul></ul><ul><li>© Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS </li></ul>
  44. 44. Navigatie: sliding doors techniek <ul><li>tab-effect: take 3 </li></ul><ul><li>li en a met background-image </li></ul>navigatie_rollover_ sliding.html
  45. 45. Ahtergrond - afbeelding(en) meer dan nodig meer dan nodig gewenste breedte
  46. 46. Fotogallerij met lijst <ul><li> layout_gallery.html </li></ul><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>
  47. 47. Floating layout <ul><li>floating element moet expliciete breedte hebben </li></ul><ul><ul><li>floating in margin en padding of border </li></ul></ul><ul><li>layout _ 2col_float.html </li></ul><ul><li>variant </li></ul><ul><ul><li>meerdere floats naast elkaar (vaste breedte) </li></ul></ul>
  48. 48. Floating layout <ul><li>25%+75%+ 1px border-left = >100% </li></ul><ul><li>wrapperdivs </li></ul><ul><ul><li>border:0, margin:0; padding:0 </li></ul></ul>
  49. 49. Floating layout <ul><li>clear </li></ul><ul><ul><li>steeds alle voorgaande floats </li></ul></ul><ul><ul><ul><li>extra container met float </li></ul></ul></ul><ul><ul><li>clear op footer of container met overflow:auto </li></ul></ul>einde van de float
  50. 50. Gepositioneerde layout <ul><li>absolute of fixed </li></ul><ul><li>inhoud met margin, padding of border </li></ul><ul><li>layout_3col_abspos.html </li></ul>
  51. 51. Gepositioneerde layout <ul><li>ook hier rekening houden met boxmodel </li></ul><ul><li>containingblock bepaalt offset </li></ul><ul><ul><li>container-div: position:relative; </li></ul></ul><ul><li>risico op overlap </li></ul>
  52. 52. Footer onderaan document <ul><li>position: absolute; bottom: 0 ? </li></ul><ul><ul><li>tov viewport niet het document </li></ul></ul><ul><li>oplossing: </li></ul><ul><ul><li>wrapper en footer absoluut gepositioneerd </li></ul></ul><ul><ul><li>layout_footer.html </li></ul></ul><ul><ul><li>+ IE<6 workaround </li></ul></ul>html, body, #wrapper { min-height: 100%;} #wrapper{ position: absolute; top: 0; left: 0;} #footer { position: absolute; [meer css]}
  53. 53. Liquid en zoom layout <ul><li>procenten en em voor fonts, widths, borders, padding, ... </li></ul><ul><ul><li>denk aan boxmodel bij floats </li></ul></ul><ul><li>min-width, max-width </li></ul><ul><ul><li> IE (underscore-hack, any selector (*) ) </li></ul></ul><ul><li>zoom-emulatie: probleem met fixed fonts in IE <7 </li></ul><ul><ul><li>relatieve fontsize op body </li></ul></ul><ul><ul><ul><li>62.5%; </li></ul></ul></ul><ul><ul><li>kolombreedtes, andere fonts, ... uitdrukken in em en % tov basis lettergrootte </li></ul></ul><ul><li>meeste gebruikers kennen de textmanipulatie menus niet </li></ul>
  54. 54. Faux columns <ul><li>met afbeelding op achtergrond </li></ul><ul><ul><li>layout_fauxcolumn.html </li></ul></ul>
  55. 55. Faux column liquid <ul><li>basis floating layout </li></ul><ul><ul><li>28%+content+30% </li></ul></ul><ul><ul><li>layout_fauxcolumn_liquid.html </li></ul></ul>© Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
  56. 56. Faux column liquid <ul><li>brede achtergrondafbeelding: 2000px </li></ul><ul><li>achtergrond moet 70% van links: 1400/2000*100 </li></ul><ul><ul><li>background: url(img/fauxcolumn_right.gif) repeat-y 70% 0; </li></ul></ul><ul><li>achtergrond moet 28% van links: 560/2000*100 </li></ul><ul><ul><li>background: url(img/fauxcolumn_right.gif) repeat-y 28% 0; </li></ul></ul>2000px 1400px 600px 560 640px transparant
  57. 57. Negative margin techniek <ul><li>omgekeerde document volgorde </li></ul><ul><li>eenvoudige oplossing voor clearingprobleem </li></ul><ul><li>maar nadelig voor toegankelijkheid </li></ul><ul><li>layout_negative_margin.html </li></ul>
  58. 58. Alternate styles <ul><li>meerdere css mogelijk </li></ul><ul><ul><li>rel = &quot;alternate stylesheet&quot; title=&quot;stijlnaam&quot; </li></ul></ul><ul><ul><li>styleswitcher in browser </li></ul></ul><ul><ul><li>javascript </li></ul></ul><ul><ul><ul><li><a href=&quot;javascript:;&quot; onclick=&quot; setActiveStyleSheet('2 kolommen'); return false;&quot;>2 cols</a> </li></ul></ul></ul><ul><li>layout.html </li></ul>
  59. 59. Problemen en oplossingen
  60. 60. Trouble in paradise <ul><li>bugs en spec overtredingen </li></ul><ul><ul><li>...and the winner is &quot;IE WIN&quot; </li></ul></ul><ul><li>IE6: meest gebruikte browser ? </li></ul><ul><li>http://marketshare.hitslink.com/report.aspx?qprid=2 </li></ul><ul><li>IE7: veel problemen opgelost, maar niet alles </li></ul><ul><li>oudere browsers </li></ul><ul><ul><ul><li>IE5, 5.5: dalend marktaandeel </li></ul></ul></ul><ul><ul><ul><li>IE/MAC: uitstervend </li></ul></ul></ul><ul><ul><ul><li>NS 4.7: nostalgie </li></ul></ul></ul><ul><ul><ul><li>... </li></ul></ul></ul><ul><li>FF, Opera, Safari (nu ook Win), Camino, Konqueror, Mozilla, ... </li></ul><ul><li>verschillende OS </li></ul><ul><li>=> test, test, test </li></ul><ul><ul><li>workarounds </li></ul></ul><ul><ul><li>hacks en filters indien nodig </li></ul></ul><ul><li>http://tredosoft.com/Multiple_IE </li></ul>
  61. 61. Internet Explorer <ul><li>float-bugs </li></ul><ul><li>positioning-bugs </li></ul><ul><li>overtredingen van de standaard </li></ul><ul><ul><li>autostretch van container rond floats </li></ul></ul><ul><ul><li>dimensieproblemen </li></ul></ul><ul><li><IE6: foute implementatie van boxmodel </li></ul><ul><ul><ul><li>Tantek hack </li></ul></ul></ul><ul><ul><ul><li>IE6: doctypeswitching: quirksmode </li></ul></ul></ul><ul><li><IE7: heel wat bugs en overtredingen van de specs </li></ul><ul><li>IE7: nog niet bugvrij en evenmin volledig volgens de specs </li></ul><ul><li>IE8: Looking good </li></ul>
  62. 62. IE bugs <ul><li>peekaboo bug </li></ul><ul><ul><li>IE6Magic  </li></ul></ul><ul><ul><li>komt vaak voor bij gebruik van footer </li></ul></ul><ul><ul><li>bug verdwijnt na uitlokken van foutief IE nested float gedrag </li></ul></ul><ul><li>demo: floating _Peekaboo.html </li></ul><ul><li>guillotine bug </li></ul><ul><ul><li>Nog meer IE6 – trucks </li></ul></ul><ul><ul><li>demo: floating_Guillotine.html </li></ul></ul><ul><li>double margin bug </li></ul><ul><ul><li>www.positioniseverything.net </li></ul></ul>
  63. 63. Don’t let the bugs bite <ul><li>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) </li></ul><ul><li>oplossingen: </li></ul><ul><ul><li>* en *+ workaround </li></ul></ul><ul><ul><li>underscore hack voor IE Win </li></ul></ul><ul><ul><li>backslash-hack (simplified Holly hack) </li></ul></ul><ul><ul><li>IE conditionele CSS (mijn keuze) </li></ul></ul><ul><ul><li> </li></ul></ul>
  64. 64. Hoe het begon: de boxmodel hack <ul><li>target IE<6 </li></ul><ul><li>beruchte hack door Tantek Celik </li></ul><ul><li>be nice to Opera </li></ul><ul><li>boxmodel2.html </li></ul><ul><ul><ul><li>width: 150px; /*waarde voor IE Win < 6 */ </li></ul></ul></ul><ul><ul><ul><li>padding: 10px; </li></ul></ul></ul><ul><ul><ul><li>border: 1px solid #000; </li></ul></ul></ul><ul><ul><ul><li>voice-family: &quot;&quot;}&quot;&quot;; </li></ul></ul></ul><ul><ul><ul><li>voice-family:inherit; </li></ul></ul></ul><ul><ul><ul><li>width:128px; /*correcte waarde vr andere browsers*/ </li></ul></ul></ul>html > body #box {width:128px;}
  65. 65. IE hasLayout -property <ul><li>“ hasLayout” is een IE/Win concept dat bepaalt hoe elementen </li></ul><ul><ul><li>hun inhoud visualizeren, </li></ul></ul><ul><ul><li>interageren met andere elementen </li></ul></ul><ul><ul><li>reageren op application/user events. </li></ul></ul><ul><li>element “has layout” indien hasLayout true </li></ul><ul><li>css-elementen kunnen de property van waarde laten veranderen </li></ul>IE hasLayout
  66. 66. IE hasLayout -property <ul><li>mogelijke gevolgen van hasLayout = false </li></ul><ul><ul><li>heel aantal IE float bugs. </li></ul></ul><ul><ul><li>blokken die basis properties fout invullen. </li></ul></ul><ul><ul><li>collapsing margins tussen een container en de afstammelingen </li></ul></ul><ul><ul><li>problemen bij de weergave van lijsten. </li></ul></ul><ul><ul><li>verschillen in de positionering van achtergronden </li></ul></ul><ul><ul><li>foute weergave bij gebruik van scripting </li></ul></ul><ul><li>aantal bugs drastisch omlaag (ook IE7) indien hasLayout = true </li></ul>
  67. 67. Oplossingen: backslash hack <ul><li>Voor IE < 6 </li></ul><ul><li>backslash (“&quot;) is allowed volgens CSS2.1 : valid </li></ul><ul><li><= IE 5.x negeert properties met escape karakters </li></ul><ul><li>voor ander browsers: </li></ul><ul><ul><li>width = width </li></ul></ul><ul><li>opmerking </li></ul><ul><ul><li>dit lukt niet voor cijfers 0-9 en a-f </li></ul></ul><ul><ul><ul><li>background: red; </li></ul></ul></ul><ul><ul><ul><li>background: red </li></ul></ul></ul><ul><li>body {font-size:x-small;font-size:small; </li></ul>
  68. 68. Oplossingen: * workaround <ul><li>In IE < 7 heeft het html-element een anonieme parent </li></ul><ul><li>dit geldt voor geen enkele andere browser </li></ul><ul><ul><li>bijvoorbeeld: vereenvoudigde tantek hack </li></ul></ul><ul><ul><ul><li>* html #content /* enkel IE < 7 */ { </li></ul></ul></ul><ul><ul><ul><li>width: 100px; /* IE <6 */ </li></ul></ul></ul><ul><ul><ul><li>width: 80px; /* IE 6 */ </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>#content { </li></ul></ul></ul><ul><ul><ul><li>width: 80px; /*andere browsers*/ </li></ul></ul></ul><ul><ul><ul><li>padding: 10px; </li></ul></ul></ul><ul><ul><ul><li>background:red; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>In conditionele css kan hiermee ook enkel IE7 gefilterd worden </li></ul><ul><li>* html .voorbeeld {margin-left:-3px;} /* <7*/ </li></ul><ul><li>.voorbeeld {margin-left: 0} /*enkel 7*/ </li></ul><ul><li>Variant enkel voor IE7: *+html .voorbeeld </li></ul>
  69. 69. * Workaround voorbeeld <ul><li>IE past regels voor nested floating niet correct toe </li></ul><ul><li>geneste floats: IE <> Specs </li></ul><ul><li>bij focus op IE: probleem in andere browsers </li></ul><ul><li> floating _IE.html </li></ul>
  70. 70. * Workaround voorbeeld <ul><li>Easyclearing-methode </li></ul><ul><ul><li>clearing old school </li></ul></ul><ul><ul><ul><li>clearing div (redundante opmaak) </li></ul></ul></ul><ul><ul><li>clearing zonder redundante html-code </li></ul></ul><ul><ul><li>:after (markup toegevoegd aan einde van el) </li></ul></ul><ul><li>floating_W3C.html </li></ul>.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;}
  71. 71. Oplossingen: Underscore Hack <ul><li>underscore (&quot;_&quot;) is allowed aan begin van CSS selectoren volgens CSS2.1 : valid </li></ul><ul><li>browsers moeten onbekende CSS negeren </li></ul><ul><li>IE <7 negeert _ aan begin van property </li></ul><ul><ul><li>voorbeeld: </li></ul></ul><ul><ul><li>_height: 300px; </li></ul></ul><ul><ul><ul><li>genegeerd in alle andere browsers </li></ul></ul></ul><ul><ul><ul><li>behandeld als height: 300px in IE <7 </li></ul></ul></ul>
  72. 72. Oplossingen: script <ul><li>min- en max- width niet door IE ondersteund. </li></ul><ul><li>mogelijke oplossing: script </li></ul><ul><li>* html #box { </li></ul><ul><li>width:expression(document.body.clientWidth < 740? &quot;740px&quot; :document.body.clientWidth > 1200? &quot;1200px&quot; : &quot;auto&quot;); </li></ul><ul><li>} </li></ul><ul><li>geen valide css! </li></ul><ul><ul><li>Kan enkel in conditionele css </li></ul></ul>
  73. 73. Oplossingen: IE conditionele CSS <ul><li>bundeling van IE-specifieke css </li></ul><ul><li>embedded: </li></ul><ul><ul><ul><li><!--[if lte IE 7]> </li></ul></ul></ul><ul><ul><ul><li><style> </li></ul></ul></ul><ul><ul><ul><li>* html .gainlayout { height: 1px; } /*ie<=6*/ </li></ul></ul></ul><ul><ul><ul><li>*+html .gainlayout { zoom: 1; /*ie7*/} </li></ul></ul></ul><ul><ul><ul><li></style><![endif]--> </li></ul></ul></ul><ul><li>extern </li></ul><ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;allbrowsers.css&quot; type=&quot;text/css&quot; /> </li></ul></ul></ul><ul><ul><ul><li><!--[if lte IE 7]> </li></ul></ul></ul><ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;iefix.css&quot; type=&quot;text/css&quot; /> </li></ul></ul></ul><ul><ul><ul><li><![endif]--> </li></ul></ul></ul>
  74. 74. Debug scenario <ul><li>isoleer problemen bij testing </li></ul><ul><li>gebruik aanwezige tools </li></ul><ul><li>valideer </li></ul><ul><ul><li>http://validator.w3.org/ </li></ul></ul><ul><ul><li>http://jigsaw.w3.org/css-validator/ </li></ul></ul><ul><li>testen, testen, testen, .... </li></ul>
  75. 75. bronnen - internet <ul><ul><li>www.ohmdesign.be / links.html </li></ul></ul>
  76. 76. bronnen - boeken

×