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
320
Start using CSS Grid Layout
rachelandrew
2
520
The New CSS Layout
rachelandrew
4
360
Your Speakers
rachelandrew
1
1k
Flexible Boxes and Grids
rachelandrew
1
180
Configuration Management with Puppet for Developers
rachelandrew
1
150
Food hacking
rachelandrew
2
260
CSS Grid Layout for Paris Web
rachelandrew
0
1.2k
The business of front-end development
rachelandrew
1
640
Other Decks in Technology
See All in Technology
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
560
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
5.6k
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
0
200
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
380
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
180
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
asken AI勉強会(Android)
tadashi_sato
0
170
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
120
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
160
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
260
Witchcraft for Memory
pocke
1
750
Featured
See All Featured
Bash Introduction
62gerente
614
210k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Language of Interfaces
destraynor
158
25k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Producing Creativity
orderedlist
PRO
346
40k
Building an army of robots
kneath
306
45k
4 Signs Your Business is Dying
shpigford
184
22k
Six Lessons from altMBA
skipperchong
28
3.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Practical Orchestrator
shlominoach
188
11k
Code Review Best Practice
trishagee
69
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/