Real-world CSS3
•
1 like•1,108 views
The document discusses using CSS3 in real-world projects. It recommends using stable CSS3 features that don't break without support, like border-radius, box-shadow, and multiple backgrounds. CSS3 can reduce development time through fewer images and HTTP requests. Media queries allow responsive designs for different devices. Features like gradients, transforms and animations can be used but require more testing. The document provides examples of CSS3 for navigation tabs, columns, and badges.
Report
Share
Real-world CSS3
- 1. Real-world CSS3 January 25, 2011 CSS3 book launch Zoe Mickley Gillenwater @zomigi
- 2. What I do Books Web new Stunning CSS3: Accessibility A Project-based Guide to specialist for AT&T the Latest in CSS Web design/CSS www.stunningcss3.com consultant Member of Adobe Dec '08 Flexible Web Design: Task Force for WaSP Creating Liquid and Elastic Layouts with CSS www.flexiblewebbook.com 2
- 3. Is it ready yet? Photo by U.S. Department of Agriculture, www.flickr.com/photos/usdagov/5201431107/ 3
- 5. Don't wait for “recommendation” 5
- 6. Use the parts of CSS3 that: ✔ have generally stable syntax. ✔ have good support. ✔ don't harm non-supporting browsers by their lack. 6
- 8. Good enhancement Firefox IE 8 8
- 9. Enhancement failure RGBA/HSLA in Firefox RGBA/HSLA in IE 8 9
- 10. A few of the things you can use... Photo by Kristin Roach, www.flickr.com/photos/kristinroach/3995676135 10
- 11. Go forth and style Safe when used Use a little more wisely cautiously border-radius transforms box-shadow gradients text-shadow animations multiple backgrounds HSLA (or RGBA if youyourself) things hard on like to make border-image new selectors box-sizing transitions @font-face media queries 11
- 12. Benefits of CSS3 (besides looking cool) Decrease Increase development time usability maintenance time accessibility page loading time adaptability across devices search engine placement 12
- 13. Reduced development and maintenance time • Fewer images, Flash, JavaScript • Streamlined markup 13
- 14. Increased page performance • Smaller file sizes • Fewer HTTP requests Reducing the number of HTTP requests…is the most important guideline for improving performance for first time visitors. Yahoo! Exceptional Performance Team, http://developer.yahoo.com/performance/rules.html 14
- 15. Better search engine placement • Google uses speed as ranking factor • Real text instead of image or Flash text 15
- 16. Increased usability • Real text • Optimized styles based on device capabilities 16
- 17. Real-world example 17
- 18. Before CSS3 FF 3.6 IE 8 IE 6 HTTP requests 36 37 47 Loading time seconds 1.5 1.3 3 18
- 19. The nav bar Before: 8 images inactive hovered current page indicator 19
- 20. The nav bar Before: 8 images inactive hovered current page indicator After: 1 image 20
- 21. Before CSS3, optimized FF 3.6 IE 8 IE 6 HTTP requests 29 30 33 Loading time seconds 1.3 1.15 2 decrease 13% 11% 33% 21
- 22. After CSS3 FF 3.6 IE 8 IE 6 HTTP requests 22 23 24 Loading time seconds 1.1 1 1.5 decrease 15% 13% 25% 22
- 23. IE 9 beta 23
- 24. IE 8 24
- 25. IE 6 25
- 26. Wrapping tabs Larger text + narrow window = ugly Amazon double-row tabs from 2000 26
- 27. Media query for nav bar @media all and (max-width:52em) { English translation: #swoosh { display: none; } Up to a maximum #mainnav { padding: 8px 0; } width of 52 ems, use #mainnav ul { margin: 0; } #mainnav li { these styles. Once you margin-left: 12px; get past 52 ems, use padding: 0; the regular styles. border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; background: none; } #mainnav li:hover { background: none; } } 27
- 28. Media queries separated <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="narrow.css" media="only screen and (max-width:52em)"> 28
- 29. IE support Make it work in IE 5-8 with JavaScript http://code.google.com/p/css3-mediaqueries-js/ <!--[if lte IE 8]> <script src="css3-mediaqueries.js"></script> <![endif]--> 29
- 30. Media queries for mobile min-width max-width device-width min-device-width max-device-width orientation -webkit-min-device-pixel-ratio 30
- 31. Targeting iPhone, Android, etc. @media screen and portrait & landscape (min-width: 320px) and (max-width: 480px) portrait & landscape (min-device-width: 320px) and (max-device-width: 480px) portrait & landscape (max-device-width: 480px) landscape only (min-width: 321px) portrait only (max-width: 320px) 31
- 32. Targeting iPad @media screen and portrait & landscape (min-device-width: 768px) and (max-device-width: 1024px) landscape only (min-width: 769px) landscape only (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) portrait only (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) 32
- 33. Viewport meta tag Forces mobile devices to scale viewport to actual device width <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> 33
- 34. Closer look: tabs • border-radius for rounded corners on top only • HSLA semitransparent white gradient for background 34
- 35. Closer look: multiple columns • column-count on paragraph to set number of columns with variable width • column-gap to control gutter width 35
- 36. Closer look: deals badge • width/height set in ems • border-radius set to half width/height to make circle • green dashed border is actual border; white solid border is hard- edged box-shadow • second fuzzy gray box-shadow beneath 36
- 37. Learn more Download slides, get links: www.zomigi.com/blog/css3-book-launch-event/ Stunning CSS3 book: www.stunningcss3.com Zoe Mickley Gillenwater @zomigi design@zomigi.com www.zomigi.com 37