Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
An introduction to CSS3 for web developers
Search
Rachel Andrew
November 29, 2011
Technology
3
210
An introduction to CSS3 for web developers
Presentation for Microsoft TechDays, May 2011
Rachel Andrew
November 29, 2011
Tweet
Share
More Decks by Rachel Andrew
See All by Rachel Andrew
MirrorConf: Solving Layout Problems with CSS Grid & Friends
rachelandrew
1
300
Start using CSS Grid Layout
rachelandrew
2
500
The New CSS Layout
rachelandrew
4
340
Your Speakers
rachelandrew
1
990
Flexible Boxes and Grids
rachelandrew
1
170
Configuration Management with Puppet for Developers
rachelandrew
1
130
Food hacking
rachelandrew
2
260
CSS Grid Layout for Paris Web
rachelandrew
0
1.1k
The business of front-end development
rachelandrew
1
610
Other Decks in Technology
See All in Technology
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
280
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
100
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
980
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
340
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.4k
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.6k
脳波を用いた嗜好マッチングシステム
hokkey621
0
290
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.5k
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
140
What's new in Go 1.24?
ciarana
1
110
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.6k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Rails Girls Zürich Keynote
gr2m
94
13k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
GitHub's CSS Performance
jonrohan
1030
460k
Code Review Best Practice
trishagee
67
18k
Transcript
INTRODUCTION TO - CSS 3 - FOR WEB DEVELOPERS
RACHEL ANDREW
RACHEL ANDREW @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com
CSS 3
CSS3 IS THE NEXT VERSION OF CSS
CSS3 IS MODULAR
SOME CSS3 MODULES ARE MORE COMPLETE THAN OTHERS
W3C MATURITY LEVELS •Working Draft •Candidate Recommendation •Proposed Recommendation •W3C
Recommendation http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels
CSS3 IS SUPPORTED BY BROWSERS Some browsers and some (parts
of) modules.
VENDOR-SPECIFIC EXTENSIONS Implementing early stage CSS3
border-radius
.box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } border-radius
IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS
IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add
extensions
IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add
extensions •If a module changes browser doesn’t need to change and break older code
IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add
extensions •If a module changes browser doesn’t need to change and break older code •Use with care - and always include the real property
USING CSS3
USING CSS3 Selectors
SELECTORS MODULE W3C Proposed Recommendation http://www.w3.org/TR/css3-selectors/
THE PROBLEM WITH CSS2 SELECTORS Not precise Led to “classitis”
If we can’t access mark-up it is hard to target things
CSS3 SELECTORS “Common sense” new selectors target elements more precisely
without adding classes
first-child target an element when it is the first child
of a parent element
first-child
div#wrapper p:first-child { ! ! font-size: 1.5em; } first-child
first-child
last-child target an element when it is the last child
of a parent element
last-child
ul#navigation li:last-child { ! ! border-bottom: none; } last-child
last-child
nth-child select multiple elements according to their position in the
document tree
nth-child
tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } nth-child
nth-child
tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } nth-child http://reference.sitepoint.com/css/understandingnthchildexpressions
div#wrapper h1 + p { ! font-size: 1.5em; } Adjacent
Sibling
Adjacent Sibling
form input[type="text"] { } ! form input[type="submit"] { } Attribute
Selectors
Attribute Selectors
label[for="fContact"] { ! float: none; ! width: auto; } a[href
^="mailto:"] { ! ! padding-right: 20px; ! ! background-image:url(email.png); ! ! background-repeat: no-repeat; ! ! background-position: right center; } Attribute Selectors
BROWSER SUPPORT
BROWSER SUPPORT
DOES IT MATTER?
THAT DEPENDS...
YES, IT MATTERS.
JAVASCRIPT Plug the holes in browser support using JavaScript.
ROLL YOUR OWN
div#wrapper p:first-child, div#wrapper p.first { ! ! font-size: 1.5em; }
jQuery: first-child <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ ! $("div#wrapper p:first-child").addClass("first"); }); </script>
ul#navigation li:last-child, ul#navigation li.last { ! ! border-bottom: none; }
jQuery: last-child <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ ! $("ul#navigation li:last-child").addClass("last"); }); </script>
tr:nth-child(odd) td, td.odd { ! background-color: #f0e9c5; } jQuery: nth-child
<script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ ! $("tr:nth-child(odd) td").addClass("odd"); }); </script>
USE A “POLYFILL” “A polyfill, or polyfiller, is a piece
of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.” Remy Sharp - http://remysharp.com/2010/10/08/what-is-a-polyfill/
CSS3 POLYFILLS http://ecsstender.org http://selectivizr.com/
CAUTION REQUIRED Remember some users may have an old browser
AND no JavaScript
USING CSS3
USING CSS3 Color
COLOR MODULE Working Draft http://www.w3.org/TR/css3-color/
OPACITY specify the opacity of an element
opacity
ul#gallery li { ! ! opacity: 0.4; } ul#gallery li:hover
{ ! ! opacity: 1; } opacity
RGBA specify the opacity of a colour with ‘alpha’
RGBA
div#feature .caption { background-color: rgba(255,255,255,0.5); } RGBA
24WAYS.ORG
BROWSER SUPPORT?
USING CSS3
USING CSS3 Fonts
FONTS MODULE Working Draft http://www.w3.org/TR/css3-fonts/
@FONT-FACE using a font other than one installed on your
user’s computer
@font-face { ! font-family: KaffeesatzBold; ! src: url(YanoneKaffeesatz-Bold.ttf); } h1
{ ! font-family: KaffeesatzBold, sans-serif; ! font-weight: normal; } @font-face
BROWSER COMPATIBILITY We need to use different types of fonts
for different browsers and operating systems
LICENSING ISSUES Most commercial fonts have a license which prohibits
them being uploaded to a webserver.
FONTS WITH FONT SQUIRREL http://www.fontsquirrel.com
FONT SQUIRREL
@font-face { ! font-family: 'YanoneKaffeesatzBold'; ! ! src: url('yanonekaffeesatz-bold-webfont.eot'); !
! src: local('☺'), url('yanonekaffeesatz-bold-webfont.woff') format('woff'), url('yanonekaffeesatz-bold-webfont.ttf') format('truetype'), url('yanonekaffeesatz-bold-webfont.svg#webfontUcEp3Pt5') format('svg'); ! font-weight: normal; ! font-style: normal; } FONT SQUIRREL
HOSTED FONT SERVICES http://www.typekit.com http://fontdeck.com/ http://webfonts.fonts.com/
EDGEOFMYSEAT.COM
USING CSS3
USING CSS3 Backgrounds & Borders
BACKGROUNDS & BORDERS MODULE W3C Candidate Recommendation http://www.w3.org/TR/css3-background/
MULTIPLE BACKGROUNDS Apply more than one background image to an
element
blockquote { ! ! background: url(quote-left.gif) top left no-repeat, !
! url(quote-right.gif) bottom right no- repeat; ! } backgrounds
backgrounds
BORDER-RADIUS CSS rounded corners
.box1 { ! ! background-color: #a18c83; ! ! border: 3px
solid #6d4d6b; ! ! -moz-border-radius: 15px; ! ! -webkit-border-radius: 15px; border-radius: 15px; ! ! color: #fff; ! ! padding: 10px; ! ! margin: 0 0 20px 0; ! } ! ! .box2 { ! ! border: 5px solid #6d4d6b; ! ! -moz-border-radius-topleft: 50px; ! ! -webkit-border-top-left-radius: 50px; border-top-left-radius: 50px; ! ! padding: 10px 5px 5px 20px; ! } border-radius
border-radius
BOX-SHADOW drop shadows without images
.box1 { ! ! background-color: #333; ! ! -moz-border-radius: 15px;
! ! -webkit-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 10px 10px 5px #666; -webkit-box-shadow: 10px 10px 5px #666; box-shadow: 10px 10px 5px #666; ! ! color: #fff; ! ! padding: 10px; ! ! margin: 0 0 20px 0; ! } box-shadow
box-shadow
BROWSER SUPPORT
CSS3 POLYFILLS http://css3pie.com/
USING CSS3
USING CSS3 CSS Media Queries
MEDIA QUERIES W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/
MEDIA QUERIES target browser characteristics, for example screen resolution, width
and height
div#wrapper { ! width: 780px; ! margin-left: auto; ! margin-right:
auto; } ! div#header { ! background-image: url(media-queries-browser.jpg); ! height: 349px; ! position: relative; } ! #content { ! float: left; ! width: 540px; } ! #navigation { ! float:right; ! width: 200px; } Media Queries
Media Queries
@media screen and (max-device-width: 480px) { ! ! div#wrapper {
! ! ! width: 400px; ! ! } ! ! ! div#header { ! ! ! background-image: url(media-queries-phone.jpg); ! ! ! height: 93px; ! ! ! position: relative; ! ! } ! ! ! ! div#header h1 { ! ! ! font-size: 140%; ! ! } ! ! ! ! #content { ! ! ! float: none; ! ! ! width: 100%; ! ! } ! ! ! #navigation { ! ! ! float:none; ! ! ! width: auto; ! ! } ! } Media Queries
Media Queries
<link media="screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet" />
Media Queries
MEDIAQUERI.ES
RESPONSIVE DESIGN http://www.alistapart.com/articles/responsive-web-design/
MOBILE BROWSER SUPPORT
YES!
YES! Unless you are targeting Windows Phone 7
PROVIDING CSS TO WINDOWS PHONE 7 http://adactio.com/journal/4494/
DESKTOP BROWSER SUPPORT
MEDIA QUERY SUPPORT
MEDIA QUERIES POLYFILLS http://code.google.com/p/css3-mediaqueries-js/ https://github.com/scottjehl/Respond
THANK YOU! Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/ Font
for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/
THANK YOU! @rachelandrew http://wp.me/PorPc-cf Photo credit for Media Queries example:
http://www.flickr.com/photos/dominicspics/4625808875/ Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/