cssosk1/vefforritun/2014/pdf/09.css.pdf · css3 css3 þróað í einingum css3 eru allar viðbætur...
TRANSCRIPT
CSSFYRIRLESTUR 9, 15. SEPTEMBER 2014ÓLAFUR SVERRIR KJARTANSSON, [email protected]
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
