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
190
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
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
390
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
6
1.7k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
660
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.6k
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
200
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
190
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
We Have a Design System, Now What?
morganepeng
53
7.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Product Roadmaps are Hard
iamctodd
PRO
54
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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/