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
200
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
270
Start using CSS Grid Layout
rachelandrew
2
450
The New CSS Layout
rachelandrew
4
320
Your Speakers
rachelandrew
1
970
Flexible Boxes and Grids
rachelandrew
1
140
Configuration Management with Puppet for Developers
rachelandrew
1
110
Food hacking
rachelandrew
2
240
CSS Grid Layout for Paris Web
rachelandrew
0
1k
The business of front-end development
rachelandrew
1
470
Other Decks in Technology
See All in Technology
web-application-security
matsuihidetoshi
0
170
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
530
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
770
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
16k
require(ESM)とECMAScript仕様
uhyo
3
780
データベース02: データベースの概念
trycycle
0
160
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
680
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
370
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
310
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
540
Building Dashboards as a Hobby
egmc
0
230
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Design by the Numbers
sachag
274
18k
Bash Introduction
62gerente
604
210k
Happy Clients
brianwarren
92
6.4k
Side Projects
sachag
451
41k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
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/