CSS for Designers
2 likes976 views
The document is a detailed presentation by Idan Gazit on frontend development for designers, covering various aspects of CSS including layout, selectors, typography, and positioning. It discusses the intricacies of the box model, element types, and browser compatibility issues, particularly with older versions of Internet Explorer. The talk emphasizes the importance of semantics and best practices in web design and typography.
![img[alt=“foo”]
<img alt=“foo” … >
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
img[alt]
<img alt=“…anything…” … >
img[alt~=“foo”]
<img alt=“blah foo bar” … >
img[alt|=“foo”]
<img alt=“blah-foo-bar” … >
IE6
IE6
IE6
IE6](https://image.slidesharecdn.com/cssfordesigners-101125034304-phpapp02/85/CSS-for-Designers-77-320.jpg)
![img[alt^=“foo”]
<img alt=“foobar” … >
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
img[alt$=“foo”]
<img alt=“barfoo” … >
img[alt*=“foo”]
<img alt=“barfoobar” … >
IE6
IE6
IE6
CSS 3](https://image.slidesharecdn.com/cssfordesigners-101125034304-phpapp02/85/CSS-for-Designers-78-320.jpg)
CSS for Designers
- 1. CSS— a talk about — frontend development for designers Idan Gazit • @idangazit HIT • 24th November 2010
- 3. http://flic.kr/p/6TnQbA I COME FROM AMERICA My Hebrew sucks.
- 4. don’t be afraid. deep but doable
- 5. Photo by adesigna - http://flic.kr/p/7eukcs
- 6. Photo by Yandle - http://flic.kr/p/4sfHWp WIREFRAMES
- 7. Photo by xiaming - http://flic.kr/p/JP3Xs SEMANTIC MARKUP
- 8. Photo by wwarby - http://flic.kr/p/3q3A3r LOTS OF EFFORT
- 13. Block vs. Inline The Box Model Positioning Selectors Typography and CSS break!
- 14. Markup CSS
- 15. BLOCK VS. INLINE
- 16. Block Inline
- 17. div p h1…h6 ul, ol, li span a img strong, em Block Inline
- 18. BLOCK 100% width height according to content can contain both inline and block content can control positioning
- 19. BLOCK Block 1 Block 2 Block 3 Block 4 Block 5
- 20. INLINE height according to content width according to content can contain content (and other inlines) automatic position in flow
- 21. INLINE Block 1 Inline 1 2 3 4 5 6 7 7 8 Block 2 Inline 1 2 3 4 5 6 7 7 8 Block 3
- 24. div p h1…h6 ul, ol, li span a img strong, em Block Inline
- 27. display: block force an element to be block-level
- 28. THE BOX MODEL
- 29. WTF? Doesn’t work the way you expect.
- 32. HOW BIG AM I? div { width: 400px; height: 500px; padding: 10px; border: 1px solid black; margin: 20px; }
- 33. HOW BIG AM I? width: 400px +10 +10 +1 +1 = 422px height: 500px +10 +10 +1 +1 = 522px padding left + right border left + right padding top + bottom border top + bottom
- 35. Math size + padding + border = actual size
- 36. More Math “width: auto;” containing block width - margin - border - padding = content width.
- 37. especially IE6
- 38. POSITIONING
- 40. STATIC Block 1 Block 2 Block 3 Block 4 Block 5
- 41. RELATIVE Block 1 Block 3 Block 4 Block 5 display: relative left: 50px top: 50px
- 42. RELATIVE Block 1 Block 3 Block 4 Block 5 display: relative left: -50px top: -50px
- 43. RELATIVE Block 1 Block 3 Block 4 Block 5 display: relative
- 44. ABSOLUTE Block 1 Block 3 Block 4 Block 5 Block 2 position: absolute; left: 0;
- 45. ABSOLUTE Block 1 Block 3 Block 4 Block 5 Block 2 position: absolute; right: 0; bottom:0;
- 46. position: relative ABSOLUTE Block 1 Block 3 Block 4 Block 2 position: absolute; right: 0; top: 100px;
- 47. position: relative ABSOLUTE Block 1 Block 3 Block 4 Block 2 position: absolute; right: 0; left: 0; bottom:0;
- 48. position: relative FIXED Block 1 Block 3 Block 4 Block 2 position: fixed; right: 0; bottom:0;
- 49. position: relative FIXED Block 1 Block 3 Block 4 Block 2 position: fixed; right: 0; left: 0; bottom:0;
- 53. floats remove elements from flow
- 54. position: relative FLOATS Block 1 Block 2 Block 3 Block 4
- 55. position: relative FLOATS Block 1Block 2 float: left; width: 200px; height: 300px; Block 3 Block 4
- 57. MARGIN COLLAPSING Block 1 margin-bottom: 50px Block 2 margin-top: 30px ??px
- 58. MARGIN COLLAPSING Block 1 margin-bottom: 50px Block 2 margin-top: 30px 50px
- 60. Photo by Wahlander - http://flic.kr/p/6UgrwM POPCORN TIME!
- 61. SELECTORS
- 62. h1 { color: red; font-size: 32px;} selector declaration block
- 63. h1 { color: red; font-size: 32px;} declaration selector declaration block
- 64. h1 { color: red; font-size: 32px;} declaration selector declaration block property value
- 65. h1 { color: red; font-size: 32px;} selector declaration block
- 66. IN THE BEGINNING, THERE WAS THE DOM
- 67. <!DOCTYPE HTML> <html> <head> <title>Show off the DOM!</title> </head> <body> <div id="content"> <p> Picture yourself on a boat in a river, with tangerine trees and marmalade skies. </p> </div> </body> </html>
- 75. p.large p of class “large” SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS p type #nav any element with id “nav” .intro.large multiple classes IE6
- 76. div > p child SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS div p descendant h1 + p adjacent sibling IE6 IE6 *universal
- 77. img[alt=“foo”] <img alt=“foo” … > SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS img[alt] <img alt=“…anything…” … > img[alt~=“foo”] <img alt=“blah foo bar” … > img[alt|=“foo”] <img alt=“blah-foo-bar” … > IE6 IE6 IE6 IE6
- 78. img[alt^=“foo”] <img alt=“foobar” … > SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS img[alt$=“foo”] <img alt=“barfoo” … > img[alt*=“foo”] <img alt=“barfoobar” … > IE6 IE6 IE6 CSS 3
- 79. PSEUDO-CLASSES :first-child :link :visited :hover :active :focus :lang(foo) SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS IE6 - links only IE7 - links only IE8 IE8 - still not 100%
- 81. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS :nth-child(formula) An+B: “Every A’th element starting from B” 3n: 0, 3, 6, 9… 3n+1: 1, 4, 7, 10… even (== 2n+1) odd (== 2n) CSS 3None of this works in IE < 9.
- 83. SPECIFIC HIERARCHICAL ATTRIBUTE PSEUDO-CLASSES PSEUDO-ELEMENTS li.optional:before li.optional:before { font-color: red; content: “optional - ” } <h1>Bring for hike:</h1> <ul> <li>hat</li> <li>water</li> <li class=“optional”>camera</li> </ul> Bring for hike: • hat • water • optional - camera IE8
- 84. SPECIFICITY style=“…” attribute in an element IDs attributes, classes, pseudo-classes elements, pseudo-elements Later rules of same specificity trump earlier rules http://www.w3.org/TR/CSS2/cascade.html#specificity
- 86. TYPOGRAPHY
- 88. — the art and science of — presenting textual information
- 89. Web Design is 95% Typography http://informationarchitects.jp/the-web-is-all-about-typography-period/
- 90. http://flic.kr/p/6KcBR4 Gutenberg: 1436 574 years of tradition and best-practices.
- 91. The clothes in which you dress your words.
- 92. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Set “Solid” 1.3em
- 93. Lorem ipsum dolor sit M nibh euismod tincidunt 1 em 1.5 em Line height of 1.3-2.0 ems RULE THUMB of
- 94. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
- 95. Measure: 2 alphabets RULE THUMB of abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
- 96. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 12px 16px/1.3em
- 98. Body Text: 16px RULE THUMB of 16px = 100% in most browsers http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
- 99. Dolphins Are Just Gay Sharks Jan 28th 2010 • 7:45 PM Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Tagged fake, news OMG PONIES BLOG
- 100. http://flic.kr/p/4Pdz2D My eyes, ze goggles do NOTHING!
- 101. 2-3 Typefaces, Maximum RULE THUMB of Sans-serif (ex. Helvetica) for titles Serif (ex. Georgia) for body text
- 103. Questions?