1 1 Introduction to CSS3 Client: Intuit (Mt. View Office); Instructor: Denise R. Jacobs; Company: Knowledge United; Dates: 13-14 January 2011; Day: 1; 2 Meet the Instructor: Me! Denise R. Jacobs is a writer, speaker, designer, and educator on many things web. She is the author of The CSS Detective Guide, and is a co-author for InterAct with Web Standards: A Holistic Approach to Web Design. She is a Web Solutions Consultant based in Miami, Florida. 3 About the Course 4 Prerequisites • Knowledge of HTML • Knowledge of basic CSS syntax, functionality, and characteristics (cascade, order, inheritance, specificity) • General knowledge of CSS1 and CSS2 properties • Knowledge of standards-based coding practices (separation of content and presentation) • Familiarity with doctypes and coding validation • Some knowledge of code troubleshooting techniques 5 Course Structure This class is approximately 50/50 lab/lecture. There will be hands-on lab exercise time after a particular subject to test out the concepts covered. 6 Course Outcomes 1 After completing this course students will: • be able to recognize CSS3 selectors, properties and values • be able to employ CSS3 selectors, properties and values in HTML-based pages • understand the differences between CSS1, CSS2, and CSS3 selectors • be able to recognize and employ all of the CSS selector combinators • be able to utilize advanced CSS2 and CSS3 selectors to better target page elements 2 • understand the difference between and uses for the various @ rules • be able to use various CSS3 properties such as border-radius, @font-face, transform and transition, gradient, box- and text-shadow, opacity and rbga, etc. in HTML-based pages • learn CSS3 cross-browser and graceful degradation coding techniques • learn the concepts of responsive design for multiple devices 7 Lab Tools • Computers must have all of the major browsers on them: Firefox, Safari, Google Chrome, Opera, and IE8. • An objective is to able to cross-browser test to see how the different browsers render the code. If there is a large user base that uses IE7, it will help to have a stand-alone version of IE7 installed on the computers
34
Embed
1 Introduction to CSS3 - denisejacobs.comdenisejacobs.com/training/css3/2011-01/notes_CSS3intro_day1_01132011.pdf · 15 What’s New in CSS3 16 What’s New in CSS3? CSS3 is the third
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
1 Introduction to CSS3Client: Intuit (Mt. View Office);Instructor: Denise R. Jacobs;Company: Knowledge United;Dates: 13-14 January 2011;Day: 1;
2 Meet the Instructor: Me!Denise R. Jacobs is a writer, speaker, designer, and educator on many things web. She is the author of The CSS Detective Guide, and is a co-author for InterAct with Web Standards: A Holistic Approach to Web Design. She is a Web Solutions Consultant based in Miami, Florida.
3 About the Course
4 Prerequisites• Knowledge of HTML • Knowledge of basic CSS syntax, functionality, and characteristics (cascade, order, inheritance, specificity) • General knowledge of CSS1 and CSS2 properties • Knowledge of standards-based coding practices (separation of content and presentation) • Familiarity with doctypes and coding validation • Some knowledge of code troubleshooting techniques
5 Course StructureThis class is approximately 50/50 lab/lecture.
There will be hands-on lab exercise time after a particular subject to test out the concepts covered.
6 Course Outcomes1 After completing this course students will:
• be able to recognize CSS3 selectors, properties and values• be able to employ CSS3 selectors, properties and values in HTML-based pages• understand the differences between CSS1, CSS2, and CSS3 selectors• be able to recognize and employ all of the CSS selector combinators• be able to utilize advanced CSS2 and CSS3 selectors to better target page elements
2 • understand the difference between and uses for the various @ rules• be able to use various CSS3 properties such as border-radius, @font-face, transform and transition, gradient, box-
and text-shadow, opacity and rbga, etc. in HTML-based pages• learn CSS3 cross-browser and graceful degradation coding techniques• learn the concepts of responsive design for multiple devices
7 Lab Tools• Computers must have all of the major browsers on them: Firefox, Safari, Google Chrome, Opera, and IE8.
• An objective is to able to cross-browser test to see how the different browsers render the code. If there is a large user base that uses IE7, it will help to have a stand-alone version of IE7 installed on the computers
2
as well so that we can test the fallbacks that are taught.
8 Resources: General Course• http://www.delicious.com/denisejacobs/css3training
• http://reference.sitepoint.com/css
9 Agenda
10 Agenda: Day 1Course, Instructor and Student Introduction• Course prereqs, structure, outcome, tools• Class roll, and student intros
Introduction• About CSS3
– What’s new in CSS3?– CSS3 Modularity
• CSS3: Values– Units of measure– Colors
11 Agenda: Day 1Laying the Foundation: CSS Page Layout• Foundations
– Lab: Initial Page Set-up• Review of page layout wireframe and final design Document Hierarchy
16 What’s New in CSS3?CSS3 is the third generation of the CSS specification recommendations from the W3C.
In CSS3 there are new selectors, pseudo-elements and classes, properties, and values specifically created to answer the needs and solve the problems of modern web design and development.
17
18 CSS3 ModularityCSS3 has been broken up into different unique modules. This means is that, for example, the particular CSS properties and values for layout is grouped into one specific module.
From a browser and implementation perspective, the benefit is that browser developers can now implement CSS3 module by module, instead of implementing entire CSS specification. This helps speed up the entire implementation process.
19 The CSS3 Modules1 • Template Layout
• Backgrounds and Borders • Ruby • Basic User Interface • Basic Box Model • Grid Positioning • Speech • Marquee • Style Attribute Syntax • Cascading and Inheritance • Color • Fonts • Text• Generated Content for Paged Media• Generated and Replaced Content
2 • Values and Units• Web Fonts • Behavioral Extensions to CSS • Line Layout • Flexible Box Layout • Image Values • 2D Transformations • Multi-column Layout
4
• 3D Transformations • Namespaces • Transitions • Animations • View Module • Media Queries • Paged Media • Selectors
20 Resources: New in CSS3• http://www.w3.org/TR/tr-groups-all#tr_Cascading_Style_Sheets__CSS__Working_Group
21 CSS3: Values
22 Units in CSS (common)Ones you’ll use all of the time:• px: pixels (a dot on the computer screen)
• %: percentage
• em: 1em is equal to the current font size.
2em means 2 times the size of the current font. e.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt.
The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.
1.Get the files here:http://denisejacobs.com/training/css3/
2.And any extra html pieces we may need here:http://html-ipsum.com/
31 MyCorpIntro – wireframe
32 MyCorpIntro – finished page
36 Document Hierarchy
37 HTML Hierarchy<html><head><title>Mikey Spillane vs. Mike Hammer</title></head><body>
6
<h1>Mikey Spillane vs. Mike Hammer</h1><p>Who is the toughest, smartest, and most steely? <em>You</em> get to be the judge by taking this <a href="survey.html">survey</a>.</p><p>Next month's survey: Sir Arthur Conan Doyle or Sherlock Holmes? <imgsrc="doyle.jpg" alt="Doyle vs. Holmes"></p></body></html>
38 HTML Hierarchy
39 The Hierarchy “Family Tree”• An ancestor is any element that is connected to other elements but is higher up the document tree, no matter how
many levels up. For example, in the document above, both the <html> and <body> tags are ancestors of the <p> tag.
• A descendant is any element connected to an ancestor, but lower in the document tree, no matter how many levels down. In our example, the <em>, <a>, and <img> are descendants of the <body> tag.
• A parent is an element directly above a connected element in the document tree. A parent element is also an ancestor, but an element can have ancestors that are not its parents.
• A child element is directly below a connected element. A child is a descendant, but an element can have descendants that are not its children.
• Sibling elements share the same parent, and are on the same level as each other in the hierarchy.
40 Advanced CSS Selectors
41 Combinator Selectors: Descendent Descendant selectors select the element that is a descendant of another element in the document tree.
50 Combinator Selectors: Sibling/AdjacentA sibling selector (also known as adjacent) selects an element that is next to another element in the document tree.
Syntax:sibling selector + sibling selector {property: value; }E + F
Example:p + ol {font-family: Georgia, serif;}
51 Combinator Selectors: AttributeAn attribute selector targets a selector with a particular attribute.
54 Foundation 3: Create a Baseline1.The CSS Reset All-star2.DIY Resets3.CSS Reset Compendia
55 Why Reset?By deliberately establishing an element’s properties, you can:• Better control the elements on the page• More quickly determine the source of problems when they arise
56 CSS Reset All-Star: Eric Meyer’s Pro’s
– One of the most popular, well thought-out– Neutralizes almost every element
Con’s– Can be too far-reaching– Extra work to establish the values for the elements you want
57 Resource: Eric Meyer’s ResetEric Meyer’s Reset: http://meyerweb.com/eric/tools/css/reset/
58 DIY Resets• You can determine exactly which elements you want to reset• May save on reestablishing properties• You know exactly what is changed and why you changed it• Problems will be that much more obvious
59 Top Properties to Reset• Margin and padding• Borders, especially on linked images• Link text underlining• Vertical alignment• Font size and line-height
60 Resource: DIY ResetsArticle on DIY resets: http://bit.ly/1D4jSB
61 Resource: CSS Reset CompendiaKiller Collection of CSS Resetshttp://tinyurl.com/5bdoj2
10
More Killer CSS Resetshttp://tinyurl.com/n746dl
62 Floats
63 The Float Property• The float property is used to move elements on the page to either the far left or far right of the containing element.
• Floating an element makes an element a block box, pushes it to the farthest edge of its containing element, takes it out of the flow of the document, and forces the other elements to wrap around it unless otherwise specified.
• Once floated, an element becomes a block box, even if it is an inline element by definition.
64 float: left• To send an element to the far left of its containing element, apply float: left.
65 float: right;• To send an element to the far right of its containing element, apply float: right.
66 Multiple floats• If there are multiple floats and they are smaller than their container, they will stack next to each other.
67 clear: (value)• To make a float move to the next line of an adjacent float, you need to clear it.
• Values: left, right, both
68 Containing floats• Because floats are taken out of the flow, they are not contained by their parent element unless the parent contains an element that is cleared.
However, there can be problems:• Content is hidden with no scrollbars when browser window is smaller than container
• Potential interference with margins, borders, outlines, and absolutely-positioned PNGs
• Application of CSS3 properties, such as box-shadow, text-shadow & transform
73 Overflow: visibleoverflow: visible allows the content to be rendered regardless of the element box’s dimensions.
74 Overflow: scrolloverflow: scroll, the browser creates scrollbars to let the user view the content of the element while maintaining the specified dimensions.
75 Overflow: autooverflow: auto lets the browser determine whether scrollbars are needed, and will only create them if and where necessary.
76 Overflow: hiddenoverflow: hidden makes the content in the element box to disappear if it extends past the boundaries of the box.
78 overflow: hidden ImprovedExample:.container {border: 1px solid #000000;overflow: auto;/* hidden & scroll also work*/width: 100%; /* some width or height required */}
12
79 Clearing floats: ClearfixClearfix uses the :after pseudo-element to generate a character at the end of the content in the parent container (after the floated elements) that is made into a block element, cleared, and is hidden from view.
80 Clearfix Issues1.Remember where to put it:
Apply .clearfix to the element containing the floats, so that the cleared content is generated after the content inside of it.
2.Be aware of support: Neither IE6 nor IE7 support the :after pseudo-class, so a trigger of hasLayout is
necessary.
81 Clearfix Issues3.Be mindful of the generated content:
Sometimes the generated period can be a problem
4.Be aware of collapsing margins: New clearfixes speak to this.
With display: block an element will display as a block element, with whitespace above and below it, and no elements next to it.
2 Inline-block:With display: inline-block, an element can have a width assigned to it like a block element, while still appearing the in the horizontal flow with its surrounding inline elements.
92 Optimization Tips FTW!Here are some tips for optimizing your code on both a micro- and macro-level, as well as ways to make sure you are targeting the elements you want on the page.
93 Macro-Optimize: Annotate Your MarkupExample:<div id="content">
<div class="promo">...</div><!-- /end .promo -->
</div><!-- /end #content -->
94 Macro-Optimize: Annotate Your CSS/* Comments are good, mmkay? */
Notation is your friend. For:• Overriding styles• Creating stylesheet sections• Listing the color scheme• Resources and contact info.bb
95 Macro-Optimize: Annotate Your CSS/* made by you on some date */
/* section of the stylesheet */p {border-color: #cf0;border-color-bottom: #ccc; /*this property overrides the previous one */}
96 Macro-optimize: Reduce, Reuse, & Recycle• Identify content patterns• Use classes instead of ids & elements• Define defaults
97 Micro-Optimize: CSS LengthLess is more:• Use shortest properties and values• Avoid duplicate properties• Use shorthand properties
15
• Condense values and units• (Avoid multiple lines and indenting)
98 Micro-optimize: CSS SpeedUp the efficiency:• ID selectors are speedier than element or universal• Drop element qualifiers• Ditch descendent selectors when and where you can
99 Micro-Optimization in ActionExample:#sidebar {background: #fff url(bg.png) repeat-x 0 0;font: normal 1.33em/1.33 Georgia, serif;border: 1px solid #f96;margin: 10px 20px;padding: .1em;}
107 The Display Property• In CSS, the property display can be used to establish the display of an element as inline, block, inline-block, list-item, run-in, compact, table or none.
• This property can override the default value of an element and effectively change its behavior.
108 Display: BlockSetting an inline element to display: block will cause it to display as a block element, with whitespace above and below it, and no elements next to it.
109 Display: InlineSetting the display: inline of a block element will cause to display as an inline element, putting it on the same line as other elements and taking up only the width of its contents.
110 Display: Inline-block• With display: inline-block, an element can have a width assigned to it like a block element, while still appearing the in the horizontal flow with its surrounding inline elements.
In other words,• inline-block forces an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.
111 Display: none• Setting the display to display:none will effectively make the element disappear from the screen – the browser will treat it as if it is not there.
• Not only will the element disappear from the page, but it will also be taken out of the flow of the page as well.
112 The Display Property: Others
17
The other display properties are:• list-item• run-in• compact• table
115 Lab TimeWhile doing the basic layout, we will:• Optimize css, target styles
• Establish the page layout with floats, float-clearing techniques, change displays, and use overflow.
116 Lab TimeWhere appropriate, let’s add styles to our example page using some of the advanced CSS2.1 selectors such as: • Child: E > F• Sibling: E + F• Attribute: selector[attribute]
117 Getting Started with CSS3:The Rules of the Road
118 CSS3 Browser Compatibility
119 The reality• Many properties are browser-specific, requiring vendor prefixes
• Plus there is a standard property
• There are syntax differences between browser-specific properties and the standard property
• All of this causes an increase in the amount of CSS
127 ISO: CSS3 SpecificationsThe CSS3 Specifications are THE resource for finding out exactly is the intented behavior and use of any given property.
http://www.w3.org/standards/techs/css#w3c_all
128 ISO: good cross-browser testershttp://tredosoft.com/Multiple_IE
http://crossbrowsertesting.com/(paid)
http://browsershots.org/(free)
19
129 Cross-browser Coding
130 The Goal: Code that works in all browsers
131 How can we achieve this?
132 Steps to get as close as possible1.Leverage source order2.Exercise multiplicity3.Be conditional4.Filter it5.Be defensive6.Let tools do all of the work
133 Leverage source order• Place default properties first
• Place browser-specific properties ahead of standard properties
• The standard properties will override the vendor’s when the standard is established.
134 A Proper Stack.gradient {color: #fff;
135 A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/
136 A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */
137 A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa)); /* gradient for the Webkits */
138 A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa)); /* gradient for the Webkits */
20
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */
139 A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa)); /* gradient for the Webkits */-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa'); } /* filter for IE7 and lower */
140 Styling in multiplesYou can use multiple stylesheets to add layers of style complexity for multiple platforms
(place after the regular stylesheet link to override styles)
142 Apply a Filter• If you must have the effect in IE, such as alpha opacity, gradient, shadow, transitions etc. you
could use a proprietary IE filter.
• The -ms-filter attribute is an extension to CSS. This syntax will allow other CSS parsers to skip the value of this unknown property completely and safely. It also avoids future name clashes with other CSS parsers.
• In Internet Explorer 8 mode, filters must be prefixed with "-ms-" and the PROGID must be in single or double quotes to make sure Internet Explorer 8 renders the filters properly.
143 Filters: {Caveat Coder}• IE filters work, but are essentially hacks
21
– IE filters are proprietary and thus not part of any standard specification, and never will be
144 Coding for Older BrowsersPractice preventive/defensive coding
– Focused & efficient code– Be prepared for bugs– Quickly and easily identify and solve problems when they come up
145 Let the tools do the work• We’ll talk about those next!
194 Lab TimeLet’s add @font-face to our example page using • the Google API• A FontSquirell @font-face kit
195 New Visual Effects in CSS3
196 New Visual Effects in CSS31.border-radius2.opacity3.rgba color4.box-shadow5.text-shadow6.gradient
197 border-radius
198 border-radius• Tips & issues
– Different syntax for mozilla, webkit, and opera browsers
• Browser Support– IE does not support, Opera: 10.50+ only
27
199 border-radiusSyntax comparison breakdown:• -moz allows multiple values for each position• -webkit individual values• Standard is like mozilla
200 border-radius
#contentcolumn {-moz-border-radius: 20px 20px 0 0;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;border-radius: 20px 20px 0 0;}
202 Graceful Degradation: border-radiusIn modern browsers
203 Graceful Degradation: border-radiusIn modern browsers
204 Full solution: border-radius#contentcolumn {
margin: -40px 3% 0 3%;width: 42%;-moz-border-radius: 20px 20px 0 0;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6);-webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6); box-shadow: 0 5px 20px rgba(0,0,0,0.6);}
218 Lab Time• Let’s add opacity to our example page.
219 rgba
220 rgba• Tips & issues
– More granular control of particular elements than opacity
• Browser Support– IE does not support– There is an IE filter that will give transparency with a color.
221 Cross-browser: rgba• Place after regular rgb color property to override in modern browsers; older browsers will ignore it
• IE bug: use the property background instead of background-color for the regular color
222 Graceful degradation: rgbaIn modern browsers
223 Full solution: rgba.rgba {background-color: #ff0000; /* fallback color in hexidecimal. */
30
background-color: transparent; /* transparent is key for the filter to work in IE8. best done through conditional comments */background-color: rgba(255, 0, 0, 0.3);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000, endColorstr=#4CFF0000)"; /* filter for IE8 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000, endColorstr=#4CFF0000);/* filter for older IEs */}
224 box-shadow
225 box-shadow• Tips & issues
– Different syntax for mozilla, webkit, and opera browsers
• Browser Support– IE does not support, Opera only 10.5
226 box-shadow.portfolio {-moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6);-webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6); box-shadow: 0 5px 20px rgba(0,0,0,0.6);}
227 Graceful degradation: box-shadow• Okay if users don’t see effect, doesn’t affect usability of the page.
• However, there is a filter for IE: shadow (actually there are 2:dropshadow as well, but shadow is said to be better)
• Extra credit: serve images through conditional comments if you didn’t want to use the filter.
228 Graceful degradation: box-shadowIn modern browsers
251 Lab Time• Let’s add a gradient to the example page.
252 Intensive Hands-On Lab Time
253 Lab TimeLet’s spend the rest of the day playing with our page so far.
I will be available for individual questions and help.
254 Tomorrow: More CSS3 Properties & CSS3 Selectors
278 Order of Dynamic Pseudo-classesMany people use the mnemonic LoVe For HAte to remember the order :link, :visited,
34
:focus, :hover, :active.
Usually, all of the link styles are written together:a {color: #3f0;}a:link {text-decoration: none;}a:visited {color: #0f3;}a:focus {text-decoration: none;}a:hover {text-decoration: underline; color: #636;}a:active {color: #f03;}
280 Lab TimeLet’s add some preliminary link and state styles to our example page.