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
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
2
290
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
170
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
110
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
620
短縮URLをお手軽に導入しよう
nakasho
0
140
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
130
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
140
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
130
Pwned Labsのすゝめ
ken5scal
1
400
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
170
Goで作って学ぶWebSocket
ryuichi1208
3
2.7k
Featured
See All Featured
A better future with KSS
kneath
238
17k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Making Projects Easy
brettharned
116
6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
A Tale of Four Properties
chriscoyier
158
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
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/