CSS3 - is everything we used to do wrong?

CSS3 - is everythingwe used to do wrong ?

re living inwe a timesexciting

better browsers

IE 9 Safari 5 Opera 11Chrome 11 Firefox 5 IE 10

Opera 11:Best HTML5 forms support

Opera 11: Best CSS3backgrounds support

p { background-repeat: space; }p { background-repeat: round; }div { background-origin: padding-box; }div { background-clip: padding-box; }div { background-size: cover; }div { background-size: contain;}

p{ background-position: left 10px top 15px;}

Chrome 11:Slightly ahead of Safari 5

background-image: Safari 5-webkit-gradient(linear,left center, right center,from(yellow), to(black));

background-image: Safari 5-webkit-gradient(linear,left center, right center,from(yellow), to(black));background-image: Chrome 11-webkit-linear-gradient(left, yellow, black);

21 June 2011??

Preview released: 11 April 2011

Release:early 2012?

are w ork ing w ithIf you s h o u ld b e p a y in g CS S3, you ion to th e latest attent n ightly builds?

http://nightly.webkit.org/

http://nightly.mozilla.org/

http://tools.google.com/dlpage/chromesxs

http://www.opera.com/browser/download/

cool CS S 3 stuff

Transforms & transitionsLinear & radial gradientsCSS3 selectorsBorder-radiusBox-shadowText-shadow@font-faceAnd more!

Befo re w e ge t too exc ited … few th ings toher e are a mind ep in ke

use CSS3 fo r the right re asons

W hile C S S 3 is exciting,w e h a ve to b e c a re fu labout how an dwhen we us e it.

r th a t s im p ly u s eR a th e because its c o o l,CSS3 u ld b e lo o k in g a twe sho ess rea s o n s fo r busin i m p le m e n tin g it.

Web fonts Less images Improved UX Device targeting Faster page speedsEfﬁcient site buildingEase of maintenance

@font-face{font-family: fontName;src:url(font.eot?) format(eoturl(font.woff) format(woff),url(font.ttf) format(truetype);}

section:target{ background: lime; }#section1:target{ background: lightgreen; }::selection{ color: #fff; background: #000;}

@media all and(max-device-width: 480px){}@media all and(min-device-width: 481px) and(max-device-width: 1024px) and(orientation:portrait){}

be aware of potential issues

Browser supportVendor extensionsChanging syntaxUnstable Structural

Vendor-specific propertydiv{-webkit-border-radius: 10px;}

Vendor-specific valuediv{background-image:-moz-linear-gradient(left, yellow, black);}

Vendor-specific property & valuediv{-webkit-transition:-webkit-transform 1s;}

Different vendor extensionsdiv{-o-border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}

Browser supportVendor extensionsChanging syntaxUnstable Structural

background-image:-webkit-gradient(linear,left center, right center,from(yellow), to(black));background-image:-moz-linear-gradient(left, yellow, black);

Browser supportVendor extensionsChanging syntaxUnstable Structural selectors

:last-child { }:only-child { }:first-of-type { }:last-of-type { }:only-of-type { }:empty { }:nth-child(n) { }:nth-last-child(n) { }:nth-of-type(n) { }:nth-last-of-type(n) { }

rtin g a n y p ro je c t,B e fo re s ta d to k n o w w h ic hyou n e e ers and devicesbrows o be sup ported need t

This will help y ou determine progressive e if nhancement oother solution r s are neededf o r y ou r p roj e ct

learn the ba sics f irst

ig n e rs ju m p in toM any des out k n o w ing theC S S 3 w ithb asics of CSS2.1

M a n y a s p e c ts of CSS3build on top of CSS2.1

22CSS2.1 selectors

36CSS3 selectors

Older IE issues like haslayoutThe block formatting context Complex CSS2.1 selector Initial values & shorthand The various box-models Inheritance & cascade Float basics

p {background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];}

E:lang(c)E:first-childE:first-lineE:first-letterE:beforeE:afterE[att]E[att=val]E[att~=val]E[att|=val]

.intro{ overflow: hidden; }.intro{ float: left; }.intro{ display: inline-block; }

.intro{ position: relative; }.intro{ zoom: 1; }

fo c uson the bigge r issues

ality is th at CSS3The re ne aspe ct of theis j u s t o de veloper toolkit

W e should be exploringhow we can m ake our desigand developm n ent practicesm ore e fficie nt & flexible

how do we b ecommore e efficie ntmore flex ible

more efficien t CS S

CSS resets

CSS resets ai m to remove a browser-spec ll iﬁc styles, and build CSS up then again from scso that each e ratch - lement will apthe same in pear all browsers

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{ margin:0; padding:0; border:0; font-size:100%; font: inherit; vertical-align: baseline;}

Strengths:Efﬁcient development

Strengths:Efﬁcient developmentConsistency for teams

Strengths:Efﬁcient developmentConsistency for teamsWeaknesses:Applied without thoughtlots of additional rewriting

Strengths:Efﬁcient developmentConsistency for teamsWeaknesses:lots of additional rewriting

CSS frameworks

CSS framewo rks are pre-prlibraries that a epared re meant to aleasier, stand low for ards-complistyling of web ant pages.

rameworks focus onMany f veloperslay out grids, allowing de ll in library classes to to pu ld comple x layouts bui

.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6,.span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13,.span-14, .span-15, .span-16,.span-17, .span-18, .span-19,.span-20, .span-21, .span-22,.span-23, .span-24{float:left;margin-right:10px;}

StrengthEfﬁcient development Lean,

Strength Efﬁcient developmentLean, abstracted CSS

Strength Efﬁcient development Lean, abstracted CSS Weaknesses Designs that don’t ﬁt Bloated frameworksPresentational class names

Keep in mind you can alwayroll you r ow s n fram e w ork

smarter CSS

Object-oriented CSS

Object-oriente d CSS styles“objects” or “m HTML odules” withcleaner, mor e efficient C SS

For all the har dcore developyes, it’s not re ers… ally object-orieIt’s just a na nted. me!

How many timesdoes your CSS file mention H2 or “float: left”?

Do you ever findyourself stylingusing Firebug?

There is a stro ng chance tha you may be “d t oing it wrong”or could at lea , st be“doing it bet ter”

e starting your CSS,Befor k at your layouts andloo try to find patterns

Are there asp ects of thelayout that co uld beabstracted i nto library it ems?

Strengthslean, robust CSS

Strengthslean, robust CSSeasier site maintenance

Strengthslean, robust CSSeasier site maintenanceavoid repetitive CSS

Strengthslean, robust CSSeasier site maintenanceavoid repetitive CSSavoid speciﬁcity wars

Strengthslean, robust CSSeasier site maintenanceavoid repetitive CSSavoid speciﬁcity warsWeaknessesadditional HTML classesnew mindset

more powerf uldevelopment

Pre-processors

Pre-processo rs allow us tovariables in use CSS files andparse them to then regular stylesh eets.

LESS SASS TurbineSwitch CSS DtCSSCSS Crush

Variables

@color1: red;@color2: green;@color3: blue;@color4: orange;@color5: brown;#a { background: @color1; }

Minification

div{width:200px;height:200px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}#one{background:red;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}#onea{color:green;}#two{background:green;-webkit-border-radius:30px;-moz-

Mixins

.border-radius(@radius: 5px){-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;}div { .border-radius(); }

PackingGzippingCompiling

Strength

Strengthfaster development

Strengthfaster developmentvariables!

Strengthfaster developmentvariables!Weaknesses

Strengthfaster developmentvariables!Weaknessesdeep nesting

#nav{ background: @color1; li { list-style: none a { color: green; } }}

Strengthfaster developmentvariables!Weaknessesdeep nestinginefﬁcient CSS

Strengthfaster developmentvariables!Weaknessesdeep nestinginefﬁcient CSSentirely new syntax

more respon sive d es ign

What isResponsive design?

Until recently, people built sifor desktop tes and/or mobi le only

Responsive design is ut creating sites thataboad apt to an y device

Problem 1:solving screen size

Ideally, we wa nt to start withsingle linear la a yout that canviewed by a be ny device

we gradua lly build aThen ries of adva nced ﬂuidse n top, con trolled bylayouts o aScript m edia que ries or Jav

@media only screen and(min-width: 800px) and(max-width: 999px){}@media only screen and(min-width: 1000px){}

This means w e can deliverentirely differe nt layoutsbased on the viewport

Problem 2:solving bandwidth issues

But what abo utimages and other media?

lly, we sho uld deliverIdea images and medialow end as the default

Then we deliv er larger, richefor those dev r media ices that can(or at least tho cope se devices witsuitable band h the width)

Problem 3:content and context

Another probl em we face is determining w hat types ofcontent shoul d be delivereddevices, and i to n what contexpeople are u t are sing the site

simple as deliveringIt is not as ed back c ontent for stripp mobile d evices and ntent for desktops rich co

The reality is t hat these lastproblems are two not solved yetBut a chang . e is coming

re at a tipp ing point.I think we a going to y soon, a m ajor site is Ver lems and c rack these three prob way we b uild sites ch ange the

wrap up

hell am I what theSo, ng? sayi

be aware of th epotential iss ues

learn the b asics fore divin g in be

focus on thebigger issue s

W rite e fficie ntly

D esign responsively

thank you Russ Weakley @russmaxdesign www.maxdesign.com.au

http://normalstory.tistory.com	21
http://skk.x10.mx	7
http://localhost	2
http://twitter.com	2
http://paper.li	2
http://a0.twimg.com	1
http://www.techgig.com	1
http://dev2.iowatransformed.com	1
http://us-w1.rockmelt.com	1
http://www.mindz.com	1
http://www.onlydoo.com	1
https://twitter.com	1

CSS3 - is everything we used to do wrong?

by Russ Weakley on Jun 02, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 41

Statistics

CSS3 - is everything we used to do wrong? — Presentation Transcript