cssosk1/vefforritun/2014/pdf/09.css.pdf · css3 css3 þróað í einingum css3 eru allar viðbætur...

CSSFYRIRLESTUR 9, 15. SEPTEMBER 2014ÓLAFUR SVERRIR KJARTANSSON, OSK1@HI.IS

CSS3CSS3 þróað í einingum

CSS3 eru allar viðbætur og breytingar á CSS eftir CSS2.1

Verður aldrei CSS4

SHIM, POLYFILL & FALLBACKShim (eða shiv) er virkni sem „stungið“ er inn og veitirvirkni frá nýju API í gömlu umhverfi

Polyfill er kóði eða plugin sem veitir þér aðgang að virknisem þú gerir ráð fyrir að vafrinn bjóði upp á. Þ.e.a.s. shimfyrir vafra API

Fallback er þegar við skilgreinum gildi sem við erum vissum að allir styðji en yfirskrifum síðan

VAFRAFORSKEYTIMeðan vafri er ekki með fullkominn stuðning við staðal eruvafraforskeyti (vendor prefixes) oft notuð til að bjóða upp ástuðning.-moz-column-count

-webkit-animation

-ms-transition

HVAÐ GETUM VIÐ NOTAÐ? hefur yfirgripsmikinn gagnagrunn yfir

stuðning vafra við ákveðna virkni

er svipað en býður líka upp áráðleggingar, t.d. hvort nota eigi, nota með fallback o.s.fr.

caniuse.com

html5please.com

COLUMNSSkiptir texta upp í dálka

Getum tilgreint

fjölda eða pláss og látið vafra reikna út fjölda

gap milli dálka

T.d. columns: 4; column-gap: 2em

Dæmi https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

http://caniuse.com/multicolumn

BORDER RADIUSSkilgreinum rúnuð horn á box og virkar þó engin bordersé á boxi

Í sinni einföldustu mynd skilgreinum við radíus hrings fyrirhvert horn en hægt að flækja

Getur haft áhrif á performance, t.d. þegar skrollað í eldritækjum

Dæmi https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

http://caniuse.com/border-radius

BOX-SIZINGBreytum því hvernig box-módelið er reiknað

box-sizing: border-box; lætur padding og border ekkivera part af heildar breidd og hæð

Einsog IE6 gerði…

http://www.paulirish.com/2012/box-sizing-border-box-ftw/http://caniuse.com/css3-boxsizing

CALCLeyfir útreikning á gildum, styður

Reiknivirkja

Nákvæmar einingar

Hlutfallslegar einingar

Vel stutt en skal nota með fallback:width: 90%; width: calc(100% - 2em);

Dæmi

https://developer.mozilla.org/en-US/docs/Web/CSS/calchttp://caniuse.com/calc

LETURGetum hlaðið inn leturgerðum með @font-face og notaðeinsog annað letur

Þurfum letur í mismunandi formum fyrir mismunandivafra, margar þjónustur sem einfalda (t.d. Font Squirrel)

Notum með fallback á letur sem við treystum

Dæmi http://www.fontsquirrel.com/

http://caniuse.com/fontface

GRADIENTSSkilgreinum lita gradient sem bakgrunn

Notum með fallback og vendor prefixum

Mikið af tólum til að útbúa

Dæmi http://colorzilla.com/gradient-editor/

http://caniuse.com/gradient

SELECTORSCSS3 skilgreinir nýja selectora

Dæmi

:nth-child(n) og :only-child

:enabled og :disabled

:not(selector)

E ~ F, F sem kemur á eftir E

Dæmi http://www.w3.org/TR/css3-selectors/

http://caniuse.com/css-sel3

TEXTItext-overflow skilgreinir hvað gerist þegar texti flæðir útúrboxi

text-shadow setur skugga á letur

Dæmi http://caniuse.com/css-textshadow

http://caniuse.com/text-overflow

TRANSFORMSLeyfir breytingar á rúmi í 2d og 3d með translate, rotateog scale

Í vinnslu, en stutt í flestum vöfrum með prefix

Getur verið hraðara að hreyfa hluti með translate ístaðinn fyrir position

Dæmi

http://www.w3.org/TR/css3-transforms/https://developer.mozilla.org/en-US/docs/Web/CSS/transformhttp://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/http://caniuse.com/transform

TRANSITIONSSkilgreinum breytingu á milli tveggja staða á elementi

Getum stýrt hverju við breytum, á hve löngum tíma ogmeð hvaða hröðun

Dæmi http://www.roblaplaca.com/examples/bezierBuilder/

http://caniuse.com/transition

ANIMATIONSAllt frá einföldum til flókna án þess að nota JavaScript

Getum stjórnað lengd, töf, fjölda birtinga o.fl. ásamt því aðskilgreina keyframe

Í flestum tilfellum bestar vafri birtingu

, Dæmi dæmi

http://lab.tylergaw.com/themanfromhollywood/https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animationshttp://caniuse.com/css-animationhttp://css-tricks.com/snippets/css/keyframe-animation-syntax/

FLEXBOXKom snemma í ljós að floats, inline-blocks og position erekki nóg til að gera flókið layout

Sérstaklega ekki ef það á að vera sveigjanlegt

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxeshttp://weblog.bocoup.com/dive-into-flexbox/

FLEXBOX SAGANjúli 2009, working draft, þá display: box

mars 2011, working draft, þá display: flexbox

júní 2012, working draft, þá display: flex

september 2012, candidate recommendation, þádisplay: flex

FLEXBOX SYNTAXdisplay: flex eða flex-inline

flex-flow: <row (frá vinstri til hægri), row-reverse,column (frá toppi til botns) eða column-reverse><nowrap, wrap eða wrap-reverse>

cross start

cross end

mainstart

mainend

flex container

1flex item

2flex item

main axis

cros

s ax

is

main size

cros

s si

ze

JUSTIFY-CONTENTflex-start

flex-end

center

space-between

space-around

Breytir staðsetningu flex itema á main axis

ALIGN-ITEMS

flex-start flex-end

center stretch

foo foo foo foo foo foo foo foo foo foo foofoo foo foo

baseline

Breytir staðsetningu flex itema á cross axis

FLEX-WRAP & ALIGN-CONTENT

flex-wrap:

wrap – ef það er ekki pláss verður til nýtt flexline

nowrap – default, lætur boxin fylla út

wrap-reverse – wrap en í öfugri röð

align-content:

Stýrir hegðun á flex-wrap

flex-start, flex-end, center, space-around, space-between

FLEXITEMS: FLEX, MARGIN &ORDER

flex er tala sem skilgreinir hversu stórt hlutfall af plássiitem tekur

margin auto „gleypir“ pláss þar sem það er skilgreint ogýtir öðrum items

order breytir röð barna

HOLY GRAIL LAYOUT

FLEXBOX DÆMIDæmi