Embed Size (px)
Citation preview
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
– Selectors: Advanced– Resets– Floats
• Float-clearing techniques– Optimizatoin
• Lab: Initial Page Set-up– Code review and initial page styling
12 Agenda: Day 1Getting Started With CSS3: Rules of the Road and Tools of the Trade• CSS3 Across the Browsers
– CSS3 browser compatibility – Cross-browser coding
• CSS3 Tools– Generators– Scripts– Browser Detection– Templates– Hands-on Lab
13 Agenda: Day 1CSS3 Properties, part I• Web Fonts
– @font-face– Webfont services– Google Font API – Hands-on Lab
3
• New Visual Effects– border-radius– opacity– rgba– box-shadow– text-shadow– Hands-on Lab
Intensive Hands-on Lab
14 Introduction
15 What’s New in CSS3
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.
24 Colors in CSS1 & CSS2.1• color_name:
A color name, ex. red
• #rrggbb: A hexidecimal number, ex. #ff0000
• #rgb: A hexidecimal shorthand number, ex. #fc0
• rgb(x, x, x): An RGB value, ex. rgb(255, 0, 0)
• rgb(x%, x%, x%): An RGB percentage value, ex. rgb(100%, 0%, 0%)
25 Colors in CSS3• rgba(x, x, x, y): An RGB value with alpha-opacity, ex. rgba(255, 0, 0, 0.2)
• hsl(x%, x%, x%): A HSL value representing hue, saturation, and lightness, ex. hsl(0, 100%, 50%)
5
• hsla(x%, x%, x%, y): A HSLA value representing hue, saturation, and lightness with alpha-opacity,ex. hsla(0, 100%, 50%, 0.5)
26 RGBA ColorAlpha opacity:0.0 = 0% = no opacity1.0 = 100% = full opacity
27 HSL Color Wheel
• 0º – Red• 60º – Yellow• 120º – Green• 180º – Cyan• 240º – Blue• 300º – Magenta
28 Laying the Foundation: CSS Page Layout
29 Initial Page Set-up: Wireframe and Code
30 Lab TimeLet’s get our example page all set-up.
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.
Syntax:ancestor selector (space) descendant selector
E F
Example:div h2 {color: green;}
42 Kick the habit… of reliance upon descendent selectors!
43 Getting AdvancedAdvanced selectors are a good way to specifically target styles for modern browsers.
The right selector will help you achieve targeting nirvana, so it’s important to know which selectors you can use now.
44 Advanced Selectors: Usage Tips• All of the CSS2 selectors are supported by the modern browsers, and almost all of the CSS3 ones are, so use them!
7
• It’s easy to target styles away from the IEs, but target them to the IEswith simpler combinator selectors
• There are “hacks” to target styles to specific browsers, other than the IEs
45 CSS 2.1 Selectors1 • Universal *
• Child CombinatorE > F
• Adjacent/Sibling CombinatorE + F
• Attribute E[~attribute]
• At Rules– @font-face– @media– @page– @charset
2 • Pseudo elements– :before– :after
• State pseudo-classes– Dynamic
• :hover• :active• :focus
– Language• :lang
– Structural• :first-child
46 CSS2 & CSS3 Selector Support
47 CSS2.1 Selectors & IE Support
• Universal * (ie7/8 – yes)• Child: e > f (ie7/8 – yes)• Sibling/Adjacent: e + f (ie7 no, ie8 – yes)• Attribute: e[attrib] (ie7/8 – yes)• Pseudo elements (ie7/8 – no)
– ::before– ::after
• State pseudo-classes, v2.1– :first-child (ie7/8 – yes)– :hover (ie7/8 – yes)– :active (ie7/8 – yes)– :focus (ie7/8 – no)– :lang (ie7/8 – no)
48 Selector: Universal
8
• The universal selector is the asterisk (*).
• This selector lets you select every element on the page and apply the style rules to them.
Example:* {font-family: Arial, sans-serif;}
49 Combinator Selectors: Child• A child selector targets an element that is a child of another element.
• A child is a direct descendant of an element in the document tree (as opposed to a more distant descendant).
Syntax:parent selector > descendant selectorE > F
Example:p > strong {font-family: Tahoma, sans-serif;}
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.
Syntax:selector[attribute]
Example:•a[title] {font-variant: italic;}
52 Resources: CSS2 Selectors• http://www.bostonwebstudio.com/presentation/intro-css2.1-css3/demo/
53 CSS Resets
9
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.
• Otherwise the parent will collapse.
69 Float Clearing
70 Float Clearing Approaches1)overflow: hidden
11
2)Clearfix3)Float Nearly Everything (FnE)
71 The Overflow Property
72 Clearing floats: overflow: hiddenAlmost everyone’s favorite float-clearing technique.
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.
77 overflow: hidden - StandardExample:.container {border: 1px solid #000000;overflow: hidden;}
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.
82 Reminder: display: block & inline-block1 Block:
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.
83 The Top Clearfix
.clearfix:after {clear: both;content: " ";display: block;font-size: 0;height: 0;visibility: hidden;}
.clearfix {display: inline-block;}
84 The New Clearfix
.clearfix:after {clear: both;content: " ";display: block;font-size: 0;height: 0;visibility: hidden;}
13
*html .clearfix {zoom: 1;} /* IE6 */
*:first-child+html .clearfix {zoom: 1;} /* IE7 */
85 Clearfix Reloaded
.clearfix:before, .clearfix:after {content: ".";display: block;height: 0; overflow: hidden;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE lt 8 */
86 The Magnificent Clearfix
.clearfix:before, .clearfix:after {content: "\0020"; /*this is a space*/ display: block; height: 0; visibility: hidden;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}/* IE fix for extra margin at bottom of page */
87 On Reloaded & Magnificent ClearfixesAddresses hasLayout in IE lt 7 and fixes margin collapse in multiple browsers.
88 Clearing Floats: FnEFloat Nearly Everything (aka “FnE”): floating the parent container contains the children.
FnE still a viable option:• Contains and clears
Potential issue:• Watch for how it affects the rest of the page layout and structure
89 Resources: Floats• http://www.delicious.com/denisejacobs/float+css3training
• http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
90 Resources: page layouthttp://www.delicious.com/denisejacobs/layout+css
14
91 CSS Optimization
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;}
100 Resources: OOCSShttp://www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/
https://github.com/stubbornella/oocss
http://www.typesett.com/2010/01/object-oriented-css-oocss-the-lowdown/
101 Resource: CSS Optimizershttp://www.cleancss.com/
http://www.codebeautifier.com/
102 Tools: CSS Compressorshttp://www.csscompressor.com/
http://www.cssdrive.com/index.php/main/csscompressoradvanced/
103 Tools: CSS Redundancy Checkershttp://www.sitepoint.com/dustmeselectors/(firefox extension)
http://services.immike.net/css-checker
104 Element Targeting TechniquesMy favorite:
outline: 1px solid red;
16
Why?• outline does not add to dimensions of the element• Color names used only for troubleshooting
105 Resources: Code Optimizing• http://www.delicious.com/denisejacobs/css+optimization
106 The Display Property
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
113 Resources: Display Propertyhttp://www.quirksmode.org/css/display.html
114 Initial Page Set-up: Styling
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
120 = Code bloat1 Ideally:
18
a.polaroid:active {z-index: 999;border-color: #6A6A6A;box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);transform: rotate(0deg) scale(1.05);}
2 Reality:
a.polaroid:active {z-index: 999;border-color: #6A6A6A;-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);-webkit-transform: rotate(0deg) scale(1.05);-moz-transform: rotate(0deg) scale(1.05);transform: rotate(0deg) scale(1.05);
}
121 Doesn’t Validate
122 None of the older IEs support CSS3…as in “not any.”
123 However, IE9 has fair support of CSS3
Finally!124 Although the reality is a bit…underwhelming
125 ISO: good property browser support charts
http://www.findmebyip.com/litmus
126 ISO: good selector browser support charts
http://www.evotech.net/blog/2009/02/css-browser-support/
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
@import 'reset.css'; @import 'structure.css'; @import 'typography.css'; @import 'widgets.css';
See:http://www.alistapart.com/articles/progressiveenhancementwithcss
141 Get ConditionalYou can use conditional comments to serve code straight to the IEs if so desired.
Example:<!--[if gte IE 6]><link href="ie_stylesheet.css" rel="stylesheet"><![endif]-->
(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!
146 Resources: Cross-browser codingAbout Conditional Commentshttp://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
Microsoft Visual Filters and Transitions Referencehttp://msdn.microsoft.com/en-us/library/ms532853%28v=VS.85%29.aspx
147 CSS3 Tools
148 Useful CSS3 Tools1.CSS3 Generators2.Helper Scripts3.Browser Feature Detection4.Templates
149 CSS3 Generators
150 CSS3Please.com
151 CSS3Generator.com
152 CSS3-Maker.com
153 CSS3 Tools at WestCiv
154 Tools: CSS3 Generators• http://css3please.com/• http://css3generator.com/• http://westciv.com/tools/gradients/index.html
• http://border-radius.com/• http://www.css3maker.com/index.html
22
• http://www.colorzilla.com/gradient-editor/
• http://csscorners.com/• http://border-image.com/
155 Helper Scripts
156 Get a helping hand…These scripts help IE lt 8 behave like CSS3-compliant browsers.
However, support of CSS3 properties varies, between scripts.
157 Ie-7.js
158 CSS3Pie.com
159 CSS Sandpaper
160 Browser Feature Detection
161 Modernizr.com
162 What does Modernizr do?Modernizr detects which CSS3 (and HTML5) properties are supported by
the browser, and appends classes to the <html> tag, which then allows you to create styles to target specific properties to individual browsers.
It is a premier progressive enhancement tool!
163 How to use Modernizrhttp://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
http://webdesignernotebook.com/css/how-to-use-modernizr
http://www.ericlightbody.com/2010/modernizr-your-tool-for-html5-and-css3-functionality/
164 Templates
165 HTML5Boilerplate.com
Paul Irish’s HTML5 template filehttp://html5boilerplate.com/
166 CSS3 Properties:
23
Part I
167 Web Fonts
168 @font-face
169 @font-face
170 @font-face• Note:
– Actually part of the CSS2.1 specification. – Therefore, the IEs do support it!
• Browser Support– However, the older IEs require fonts to be in EOT format– IE9 now supports WOFF!
171 @font-face@font-face { font-family: 'Graublau Web'; src: local('Graublau'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); url('GraublauWeb.eot'), format('eot');}
172 @font-face bug: IE@font-face super bullet-proofing
The problem:@font-face doesn’t work, even with the proper normal syntax. What gives?
The solution:Separate out the .eot call with a new @font-face declaration.
173 @font-face bullet-proofing@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'), format('eot');}
@font-face { font-family: 'Graublau Web'; src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');}
24
174 @font-face bug: Webkit@font-face bold and italics “bug”
The problem:Applying font-weight:bold or font-style: italic to @font-face'd text doesn’t work.
The solution:Add the value normal to font weight, style, and variant in the @font-face declaration to set a baseline.
175 Get your @font-face + faux variations
Example:@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); font-weight:normal;font-style:normal;font-variant:normal;}
177 Graceful degradation: @font-faceIn modern browsers
178 Full solution: @font-face@font-face { font-family: 'Colaborate Light'; src: url('ColabLig.eot');font-weight:normal;font-style:normal;font-variant:normal;}
@font-face { font-family: 'Colaborate Light'; src: local('☺'), url('ColabLig.woff') format('woff'), url('ColabLig.ttf') format('truetype');font-weight:normal;font-style:normal;font-variant:normal;}
179 Font Licensing• When you decide to use a font as a webfont, you have to be sure that the EULA supports it.
• One way to avoid that is to use ONLY fonts that are listed as approved webfonts.
25
180 FontSquirrel.com
181 Resources: @font-face• http://www.delicious.com/denisejacobs/font-face
• http://www.fontsquirrel.com/fontface/generator
182 Webfont Services
183 Webfont Services• You can pay a service where the webfonts are hosted elsewhere, and you link to them and use the fonts on their server.
184 Webfont Services• http://www.typotheque.com/webfonts• http://typekit.com/• http://fontdeck.com/• http://kernest.com/• http://www.ascenderfonts.com/webfonts/• http://www.webtype.com/• http://www.fontslive.com/• http://www.extensis.com/en/WebINK/• http://webfonts.fonts.com/• http://webfonts.info/wiki/index.php?title=Category:Webfont_Services
185
186
187
188 Google Font API
189 Google Font API• The Google Font API helps you add web fonts to any web page.
• The number of fonts is currently limited.– http://code.google.com/webfonts
190 Google Font Directory
http://code.google.com/webfonts
191 Google Font API
26
Method 1: Head Link<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'>
#headline h1 {text-align: center;font-size: 8em;color: #111;text-shadow: 0px 2px 3px #555;font-family: 'IM Fell DW Pica', arial, serif;
}
That’s it! Just two copy and paste actions and you’ve got yourself a fancy new webfont.
192 Google Font APIMethod 2: @Import@import url(http://fonts.googleapis.com/css?family=Inconsolata);
Simply paste this into the very top of your CSS page, then copy the font-family CSS snippet and paste.
193 @font-face Resources• http://www.fontsquirrel.com/
• http://code.google.com/apis/webfonts/docs/getting_started.html
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);}
205 Full solution: border-radiusConditional Comment:<!--[if gte IE 6]><link rel="stylesheet" type="text/css" href="ohhai_ie78.css" /><![endif]-->
IE7/8 CSS#contentcolumn {background: url(bg_content_left.png) top left no-repeat;display: inline; margin: -40px 3% 0 3%;padding: 0 0 0 0;width: 41.9%;}
#content {background: url(bg_content_right.png) top right no-repeat;margin: 7px auto 0 26px;padding: 0 0 50px 0;}
206 Full solution: border-radiusConditional Comment:<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ohhai_ie6.css" /><![endif]-->
28
IE6 CSS#contentcolumn {background: transparent url(bg_content_left_nds.gif) top left no-repeat; margin: -40px 3% 0 3%;width: 41.9%;}
#content {background: transparent url(bg_content_right_nds.gif) top right no-repeat;margin: 0 -5px 0 17px;padding: 0 0 0 8px;}
207 Border-radius.com
208 Tools: border-radiushttp://border-radius.com/
http://css3please.com/
http://css3generator.com/
http://www.css3maker.com/index.html
209 border-radius Resourceshttp://www.delicious.com/denisejacobs/border-radius
210 Lab Time• Let’s add border-radius to our example page.
211 opacity
212 opacity• Tips & issues
– Do not use on elements that would cover important content
• Browser Support– IE does not support– There is a filter: opacity
213 opacity
#feature-meta {background:none repeat scroll 0 0 #3C4C55;opacity:0.85;}
Override for children elementsdiv.opacity * {opacity: 1;}
29
215 Graceful degradation: opacityIn modern browsers
216 Full solution: opacity.opacity {background-color: #3C4C55;color: #fff;opacity: 0.5;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=20)"; /* IE8 only */filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); /* IE6, IE7, and IE8 */filter: alpha(opacity=20);}
217 Opacity Resourceshttp://www.delicious.com/denisejacobs/opacity
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
229 Full solution: box-shadow.boxshadow {-moz-box-shadow: 3px 3px 10px #333;-webkit-box-shadow: 3px 3px 10px #333;box-shadow: 3px 3px 10px #333; /*standard*/-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')"; /* For IE 8 */filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333'); /* For IE 5.5 - 7 */}
230 Tools: box-shadowhttp://css3please.com/
31
http://css3generator.com/
http://www.css3maker.com/index.html
http://westciv.com/tools/box-properties/index.html
231 Resources: box-shadowhttp://www.delicious.com/denisejacobs/box-shadow
232 Lab Time• Let’s add box-shadow to our example page.
233 text-shadow
234 text-shadow• Tips & issues
– Can help accentuate text and improve readability and visual importance
• Browser Support– IE does not support, but you could use a ie filter
235 Graceful degradation: text-shadow• If it doesn’t show up, that’s okay
• No impact on accessibility
• However, there is an IE filter: shadow.
• Extra credit: image replacement
236 Graceful degradation: text-shadowIn modern browsers
237 Full solution: text-shadow.textshadow h2 {text-shadow:1px 1px 2px rgba(48,80,82,0.8);-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#305052')";/* For IE 5.5 - 7 */filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#305052');}
32
238 Tools: text-shadowhttp://css3please.com/
http://css3generator.com/
http://www.css3maker.com/index.html
http://westciv.com/tools/text-properties/index.html
239 Resources: text-shadowhttp://www.delicious.com/denisejacobs/text-shadow
240 Lab Time• Let’s add text-shadow to our example page.
241 gradient
242 gradient• Tips & issues
– Different syntax for mozilla and webkit browsers
• Browser Support– IE and Opera do not support, so will still need a fallback image*
*which may make you think “then why use it at all?”
243 gradient#mainnav li a {background-color: #f7f6f4; background-image: url(bg_navitems.gif); background-image: -moz-linear-gradient(100% 100% 90deg, #ccc9ba, #ffffff);background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ccc9ba));}
244 Gradient: Syntax breakdown
245 Graceful degradation: gradient• Gradient will not appear older browsers
• Establish fallback background image first in code
33
246 Graceful degradation: gradientIn modern browsers
247 gradient: Full solution.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*background color matches one of the stop colors. The gradient_slice.jpg is 1px wide */background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa')";/* IE8+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa'); /* IE7- */
}
248 Colorzilla gradient tool
249 Tools: gradienthttp://www.colorzilla.com/gradient-editor/
http://www.westciv.com/tools/gradients/
http://css3please.com/
http://css3generator.com/
250 Resources: gradienthttp://www.delicious.com/denisejacobs/gradient
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.
