Client side representation Webtechnologie Lennart Herlaar Lennart Herlaar - UU
Inhoud Werkpaarden Luxe paarden Stylesheets, CSS (Webdesign en usability) Lennart Herlaar - UU
Client side representation Style sheets, CSS Webtechnologie Lennart Herlaar Lennart Herlaar - UU
Ojas Oja 1: Markup Oja 2: HTML Scheiding van presentatie en structuur / semantiek Toegankelijkheid, onderhoudbaarheid, verwerkbaarheid, onontkoombaarheid Consistentie, diversificatie, efficiëntie Oja 2: HTML id en class attribuut Een HTML document is een boom html head body title h1 p a b Lennart Herlaar - UU
Style sheets en style sheet talen De plek van descriptive markup is helder Maar waar komt de presentatie dan terecht? Style sheets, geschreven in een style sheet taal Diverse style sheet talen DSSSL, voor SGML XSL, voor XML (XSL-FO, XSLT, XPath) CSS, voor (X)HTML en XML Style sheet talen lijken soms programmeertalen! Transformaties Lennart Herlaar - UU
Het XML / XSL landschap DTD Valideren XML Transformeren XSLT XSL-FO LaTeX XML PDF CSS (X)HTML Lennart Herlaar - UU
Componenten style sheet taal Selectors Aan welke structuurelementen wijs je een style toe? Properties Welke style eigenschappen betreft het? Values en units Welke waarde in welke eenheid krijgt de property? Value propagation mechanisme Hoe werken waardes door bij ontbreken / conflicten? Formatting model Hoe worden onderdelen op de "pagina" geplaatst? Lennart Herlaar - UU
Cascading Style Sheets Presentatie sterk vermengd met structuur HTML 3.2 introduceerde de <font> tag Browser specifieke interne style sheets CSS1 al in 1996 een W3C standaard Implementatie in browsers verliep moeizaam CSS2, CSS2.1, CSS3, CSS4 CSS2.1 nog altijd niet volledig geïmplementeerd Lennart Herlaar - UU
Locatie style sheet Inline styles Interne style sheet <h1 style="font-family: 'Times New Roman';">Head!</h1> <p style="color: red; margin-left: 20px;">My text.</p> <head> <style type="text/css"> h1 {font-family: 'Times New Roman';} p {color: red; margin-left: 20px;} </style> </head> […] <h1>Head!</h1> <p>My text.</p> Lennart Herlaar - UU
Locatie style sheet Externe style sheet Externe style sheets <head> <link rel="stylesheet" type="text/css" href="defaults.css"/> href="specifics.css"/> </head> <h1>Head!</h1> <p>My text.</p> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"/> </head> <h1>Head!</h1> <p>My text.</p> h1 {font-family: 'Times New Roman';} p {color: red; margin-left: 20px;} Lennart Herlaar - UU
Selectors Syntax style sheet regels Selector kan gecompliceerd zijn In de basis een element Of een class attribuut Of een id attribuut Of een combinatie Of … p.dwarf {size: 5px;} p.giant {size: 20px;} .dark {color: black;} selector {property_1: value_1; property_2: value_2; … property_n: value_n;} <p>Snow white is a normal person.</p> <p class="dwarf">Grumpy is a dwarf.</p> <p class="dark giant">Scary big guy.</p> p {color: red;} <p class="error">Fout!</p> .error {color: red;} p.error {color: red;} <p id="first">Welkom!</p> #first {color: green;} Lennart Herlaar - UU
Selectors Een selector vormt een conditie Als de volledige selector van toepassing is, kan de style worden toegepast Veel verschillende mogelijkheden a.b : element a met class b *.b : alle elementen met class b (of gewoon .b) a#b : element a met id b a, b : element a of b a b : element b met ancestor a a > b : element b met parent a Lennart Herlaar - UU
Selectors, properties, values h1, h2, h3 {color: white; background-color: black; width: 100%; text-align: center;} img {float: right; margin-left: 40px;} p.book:first-line {font-style: italic;} a {text-decoration: none;} a.outside:hover {color: green; background-color: #ccffcc;} ul ul li {margin: 0px;} table.schedule td, th {text-align: center; border: solid 1pt;} .b {font: italic small-caps bold 14pt/16pt arial, sans-serif;} Lennart Herlaar - UU
Cascading? Diverse plekken voor specificatie style Voorrangsregels bepalen welke style "wint" Prioriteit (in afnemende volgorde) Inline style Embedded style Externe style sheet User style, User Agent style Niet gespecificeerde styles worden aan een lager niveau overgelaten Cascading Author style Lennart Herlaar - UU
Cascading! Binnen één niveau wint de meest specifieke style id voor class, class voor elementnaam En daarna de laatst gedefinieerde Wat als er geen style gedefinieerd wordt? De style van de parent (inheritance; scoping) Of de ingebakken default style (initial value) HTML is een boom Start bij het blad Gebruik de styles die je daar vindt Doe hetzelfde één niveau hoger voor unknown styles CSS reset Lennart Herlaar - UU
Specificiteit in actie span {color: red;} span span {color: blue;} span.foo {color: green;} span span.foo {color: turquoise;} span.bar {color: maroon;} <span class="foo">Hey!</span> <span>Wow! <span>Amazing!</span> <span class="foo">Impressive!</span> <span class="bar">k00l!</span> <i>Fantastic!</i> </span> Lennart Herlaar - UU
Box model Document gemodeleerd als hiërarchie van boxes Properties van de boxes zijn aanpasbaar Block level boxes 4 zones Width, height Margin, border, padding: 1 tot 4 waarden Defaults, maar niet altijd gelijk aan 0 Boxes kun je tot in detail positioneren Je site is feite een aantal goed gepositioneerde boxes met elk een eigen functie Lennart Herlaar - UU
Positionering Document gemodeleerd als hiërarchie van boxes Lijkt op maar is niet gelijk aan de document boom Boxes worden volgens een bepaalde flow geplaatst Block level versus inline level elementen Normale flow: inline naast elkaar, block onder elkaar Aanpasbaar display: inline, block position: static, fixed, relative, absolute (maar…) float: left, right, none Met generieke containers de kracht van CSS Lennart Herlaar - UU
Eenheden, lengtematen 'Absolute' eenheden Relatieve eenheden in, cm, mm pt (point, 1pt=1/72in), pc (pica, 1pc=12pt) px (maar…) Relatieve eenheden vw, vh, vmin, vmax: viewport (CSS3) em: huidige font size ex: huidige hoogte van de kleine letter x rem: root em (CSS3) body {font-size: 10pt;} p {border: 3px solid red;} h1 {font-size: 1.8em;} img {max-height: 95vh;} Lennart Herlaar - UU
Alles is relatief… Percentages zijn uiteraard ook relatief containing block versus font size Overerving van de berekende waarde Niet van het percentage Onder andere van belang bij gebruik van em Line height van h1? Cumulatief karakter van em body {font-size: 10pt; line-height: 2em;} h1 {font-size: 15pt;} li {font-size: 0.8em;} Responsive design Lennart Herlaar - UU
CSS3 (en CSS4) Modulaire opzet Meer dan 50 CSS modules Selectors Level 3/4, Values and Units Level 3, Basic Box Model Level 3 Backgrounds and Borders Level 3/4, Text Level 3 2D/3D Transformations, Transitions Meer dan 50 CSS modules In verschillende fasen van het standaardisatieproces Effecten, UI, selectors, media queries, fonts, … Vendor specific properties -moz-, -webkit-, -o-, -ms- Lennart Herlaar - UU
Afgeronde hoeken Vroeger… <div class="foo"> <div class="inner"> <div class="inner2"> <div class="inner3"> </div> Hello World Hello World .foo {background: url(img/topright.png) top right no-repeat;} .foo .inner {background: url(img/bottomright.png) bottom right no-repeat;} .foo .inner2 {background: url(img/topleft.png) top left no-repeat;} .foo .inner3 {background: url(img/bottomleft.png) bottom left no-repeat;} Lennart Herlaar - UU
Border radius, border image .foo {border-radius: 10px;} .foo {border-radius: 25px 40% 0 40%;} .foo {border-image: url(border.png) 30 round;} .foo {border-image: url(border.png) 30 stretch;} Lennart Herlaar - UU
Border image Lennart Herlaar - UU
Borders, backgrounds .foo {background: linear-gradient(rgba(0,0,255,.1), black); box-shadow: 20px 20px 15px -10px rgba(255,100,0,1);} .foo {background: linear-gradient(-45deg, white, #f09 20%, black); box-shadow: 20px 20px 15px -10px rgba(100,255,0,.5);} .foo {background: radial-gradient(#ff0, transparent);} Lennart Herlaar - UU
2D transformations Translate, rotate, skew, scale, matrix .foo {transform: rotate(30deg);} Lennart Herlaar - UU
3D transformations, transitions Transformations in 3D varianten "beschikbaar" Daarnaast transitions Dynamische transformations .foo:hover {width: 200px; height: 200px; transform: rotate(180deg);} .foo {width: 100px; height: 100px; transition: width 2s, height 2s, transform 4s;} Lennart Herlaar - UU
Animations Op basis van "at-rules" Zonder JavaScript! @keyframes .foo {animation: myanim 5s;} @keyframes myanim { 0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px;}} Lennart Herlaar - UU
Text effects, columns, fonts .foo {text-shadow: 5px 5px 5px red;} .foo {text-shadow: 0px 0px .2em black;} .foo {column-count: 3;} .foo {font-family: nws;} @font-face {font-family: nws; src: url('Sansation_Light.ttf');} @font-face {font-family: nws; src: url('Sansation_Bold.ttf'); font-weight:bold;} Lennart Herlaar - UU
Selectors Pseudo-classes :only-child, :nth-child, :nth-of-type, :last-child, … .foo:nth-child(odd) {outline: .2em solid #8f0;} .foo:nth-child(3n) {outline: .2em solid #8f0;} tr:nth-child(2n+1) {background-color: #99ff99;} .foo:nth-child(3n+2) {outline: .2em solid #8f0;} Lennart Herlaar - UU
Selectors Pseudo-classes :root, :empty, :enabled, :disabled, :checked, … <input type="radio" id="m" value="male" name="gndr"/> <label for="m">Male</label><br/> <input type="radio" id="f" value="female" name="gndr"/> <label for="f">Female</label> input:checked + label {text-shadow: 0 0 .5em red;} Lennart Herlaar - UU
Fratsenmodus (quirks mode) Box model revisited Box sizing 50% + 50% = 100% ? .foo {box-sizing: content-box; width: 50%; border: 1em ridge red;} .foo {box-sizing: border-box; width: 50%; border: 1em ridge red; margin: 1px;} .foo {box-sizing: border-box; width: 50%; border: 1em ridge red;} IE x, met x < 6 Fratsenmodus (quirks mode) Lennart Herlaar - UU