• Stöds inte av alla webbläsare • Kommer (med största sannolikhet) inte stödjas av äldre webbläsare • Standard ej fastställd, så den kan ändras • Lösningar finns dock! (tittar vi på senare)
en text till en bild/figur, t.ex. • <img src="path/to/image" alt="About image"> <p>Image of Mars. </p> • Nu kan vi ange att texten tillhör bilden, t.ex. • <figure> <img src="path/to/image" alt="About image"> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>
välja om delar av sidans innehåll ska vara editerbart för användaren. • Detta görs genom attributet contenteditable=”true” • <ul contenteditable=”true”>
Man kommer åt sidorna offline • Sidorna laddar fortare • Minskad belastning på servern (mindre data skickas) • http://www.w3schools.com/html/html5_app_cache.asp
starta/stoppa video • Kunna visa video i fullskärm • Kunna ändra volymen för video <video width="320" height="240" controls autoplay> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <object data="movie.mp4" width="320" height="240"> <embed width="320" height="240" src="movie.swf"> </object> </video>
starta/pausa/stoppa ljudet • Kunna söka i ljudet • Kunna ändra volymen för ljudet <audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
på att: • Utveckla för bakåtkompabilitet • Lägg inte kritiska funktioner i nya HTML 5-element • Tänk på att form-validering m.m. inte fungerar i webbläsare som ej stödjer HTML 5 • Vem ska använda webbplatsen, vilka webbläsare använder er målgrupp?
Section • Footer • M.fl. finns inte i t.ex. Internet Explorer 8 • Lösning: ”HTML5shiv” • https://code.google.com/p/html5shiv/ • ”HTML5shiv” skapar via JavaScript de element som inte finns inbyggda i webbläsaren.
och är bakåtkompatibel , precis som HTML 5. • Vi kommer titta på områden som: • Nya möjligheter till visuellt utseende • Animation • Nya selektorer (vad vill vi styla?)
olika mycket av de nya CSS 3 egenskaperna • Här kan man se vilka webbläsare som stöder vad: http://fmbip.com/litmus • Vad innebär: -webkit- -moz- -ms- -opera-
vi kommer titta på är: • Rundade hörn • Skuggor för element • Skuggor för text • Bakgrundsfärg genom RGBA • Font-face (typsnitt) • Kolumner • Box resizing • Content box/Border box • Gradients
att göra rundade hörn på boxar. • Tidigare gjordes det antingen av bilder eller genom massor av <div>-element (t.ex. 15st per hörn) • Syntaxen för att göra rundade hörn är: border-radius:10px 10px 25px 25px; De fyra värdena är för varje hörna och börjar uppe till vänster och går sedan medsols.
man gjort tidigare genom bilder • Nu kan man göra det genom CSS – vilket är mycket smidigare! (och snabbare) • Syntax för skugga: box-shadow: 2px 2px 10px 0px #333; box-shadow: ”horisontal skjutning” ”vertikal skjutning” ”längd på skuggning” ”spridning” ”färg”;
hexadecimal • Har en stor fördel, man kan ange ”opacity” d.v.s. ”genomskinlinghet” mellan 0 - 1. • Syntax color: rgba(75, 123, 213, 0.5); color: rgba(”röd”, ”grön”, ”blå”, ”genomskinlighet”);
sig på de typsnitt som användaren har förinstallerat på sin dator • Nu kan man ”bifoga” det typsnitt man vill ska visas! • Syntax @font-face { font-family: 'myfont'; src: url('font1.eot?') format('eot'), url('font1.woff') format('woff'), url('font1.ttf') format('truetype'); } - Google fonts: http://www.google.com/fonts
för ett element ska ligga ”i” boxen eller ”utanför” (utanför är standard i CSS 2 som vi lärt oss hittills) • För att ramen ska ligga ”i” boxen: box-sizing: border-box; • För att ramen ska ligga ”utanför” boxen: box-sizing: content-box;
• Tidigare så gjordes animationer nästan alltid genom JavaScript – vilket man nu inte längre behöver! • Det finns två olika sätt att animera i CSS 3 - Via ”transistions” (rörliga animeringar) - Via ”transform” (förvränga element)
lista: http://oli.jp/2010/css-animatable-properties/ • Syntax transition: all 1s ease-in; transition: ”egenskap” ”tid” ”metod”; • OBS – Sker när ett element byter skepnad, t.ex. genom ”hover”, ”focus” osv. a:hover{egenskaper}
Syntax transform: scale(0.5) rotate(-20deg) translateX(20px) translateY(20px) skewX(10deg) skewY(10deg); • Scale: Hur stor boxen ska vara (1 är orginalstorlek) • Rotate: Hur många grader ska boxen vara vriden • Translate: Hur ska boxen vara placerad • Skew: Hur ska den vara förvrängd?
.class, #id) finns det ny sätt att hitta det man vill styla. • Genom mönster (t.ex. alla element som har ett idsom innehåller ”val”: E[id*=”val”] • Nya pseudoklasser (t.ex. om ett element bara har ett enda barn: E:only-child) • http://www.456bereastreet.com/archive/200601/css_3_sel ectors_explained/
tibbelit
japanstrokeassociation
utokyoissr2360
matleenalaakso
crebowinfo
2720japanoke
akiraasano
signer
ikefukurou777
bryan
eileencodes
tenderlove
marktimemedia
quramy
keathley
morganepeng
maggiecrowley
afnizarnur
shlominoach
cassininazir
skipperchong
