Html css
Se está descargando tu SlideShare.
×
![CSS | Pseudo elementen - voorbeeld
@media print {
a[href]:after {
content: " (" attr(href) ") ";
}
}](https://image.slidesharecdn.com/html-and-css-160105092514/75/refresher-html5-and-css3-cc-fe-ux-11-2048.jpg?cb=1670235084)
Eche un vistazo a continuación
Más Contenido Relacionado
A los espectadores también les gustó (13)
Similares a Refresher HTML(5) and CSS(3) - CC FE & UX (20)
Más de JWORKS powered by Ordina (20)
Refresher HTML(5) and CSS(3) - CC FE & UX
- 1. HTML & CSS Opfrissen van HTML & CSS Wat is nieuw in HTML5 & CSS3
- 2. Competence Center Front-end & UX Jan De Wilde Front-end ontwikkelaar
- 3. CSS
- 4. CSS | Intro CSS = Cascading Style Sheet Inline, interne en externe stylesheets Selectors: .ordina-competence-center .is-de-max { font-weight: bold; } Gebruik een CSS Reset Vendor prefixes: -webkit-, -moz- Vb. -webkit-border-radius: 10px
- 5. CSS | Aanroepen Inline <div style=”font-weight:bold;”></div> Intern in head <head> <style type=”text/css”> .ordina-competence-center .is-de-max { font-weight: bold; } </style> </head> Extern in head <link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />
- 6. CSS | Box model Ieder element = doos Omringd door padding, border en marge Bij normaal gedrag tellen we alles op bij het element IE box model bug (<= IE6): padding en border worden opgenomen in het element waardoor de doos kleiner is
- 7. CSS | Box model Alles optellen bij inhoud: -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-model.html
- 8. CSS | Positionering Algemeen Positionering: left, top, right, bottom positionering: static (standaard) z-index: elementen sorteren position: relative; Blijft op zijn plaats binnen de parent position: absolute; Zweeft boven de pagina Binnen de grenzen van de parent (parent op position: relative; plaatsen!) Parent met allemaal absoluut gepositioneerde elementen klapt toe!
- 9. CSS | Positionering position: fixed; Zweeft boven de pagina Parent is altijd body positionering.html
- 10. CSS | Pseudo elementen :active :hover :visited :first-child :last-child :before :after :first-letter :first-line :focus :link
- 11. CSS | Pseudo elementen - voorbeeld @media print { a[href]:after { content: " (" attr(href) ") "; } }
- 12. CSS | float en clear Float Links of rechts floaten Elementen die na een float element komen zullen wrappen rond dit element Clear Elementen na een float kan je clearen Geef aan aan welke kant float elementen niet toegelaten zijn De waarde kan zijn: left, right, both float-clear.html
- 13. CSS | De clearfix hack /* new clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ clearfix.html
- 14. Inline Naast elkaar Hebben voor en achter het element geen line break Block Onder elkaar Hebben voor en achter het element een line break Nemen by default de volledige breedte van de parent in Inline-Block Maakt block elementen inline De block karakteristieken blijven behouden CSS | inline, block, inline-block?
- 15. CSS | Elementen centreren Via margin margin: 0 auto; width: value; of max-width: value; max-width zorgt ervoor dat er flexibel kan geschaald worden Via absolute positionering position: absolute; left: 50%; margin-left: -value / 2; width: value; centreer.html
- 16. CSS3
- 17. CSS3 Animaties en transities Waarden berekenen met calc() Meer geavanceerde selectors Gegenereerde inhoud en counters Gradients Webfonts Border Radius Box Shadow Box Sizing Border images Media queries Meerdere achtergronden CSS Columns CSS 3D Transforms Flexbox …
- 18. Border radius -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; of: -webkit-border-top-left-radius: 12px; -moz-border-radius-topleft: 12px; border-top-left-radius: 12px; CSS3 | Border radius & box shadow Box shadow -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; 1. Horizontale offset 2. Verticale offset 3. Blur radius 4. Reikwijdte 5. Kleur
- 19. CSS3 | Animatie -webkit-animation: orbit 2s linear infinite; animation: orbit 2s linear infinite; 1. Animatie naam 2. Duur animatie 3. Type animatie 4. Aantal herhalingen @-webkit-keyframes orbit { from { -webkit-transform:rotate(0deg);} to { -webkit-transform:rotate(360deg); } } @keyframes orbit { from { transform:rotate(0deg); // Future chrome support -webkit-transform:rotate(0deg); } to { transform:rotate(360deg); // Future chrome support -webkit-transform:rotate(360deg); } } animatie.html
- 20. CSS3 | Transitie transition: background-position 0.8s ease 1s; 1. CSS Property 2. Duur transitie 3. Type transitie 4. Delay transitie.html
- 21. CSS3 | Webfonts @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } @font-face geeft de mogelijkheid om fonts die normaal enkel in design gebruikt werden, online te gaan gebruiken Rekening houden met rechten Verschillende platformen: Google Fonts, Typekit, Fontdeck, ... Verschillende extensies: eot, woff, ttf en svg
- 22. CSS3 | Media queries Responsive Toestel en scherm afhankelijke stijlen Meta viewport tag Ondersteuning is groot Fallback voor IE8 en lager voorzien: Respond.js Ga voor mobile first! Zelf schrijven of framework gebruiken <meta name="viewport" content="width=device- width, initial-scale=1.0"> @media only screen and (min-width: 480px) { ...styles for 480px and up go here } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ } media-queries.html
- 23. Grid Nog volledig in opbouw Heel weinig ondersteuning Specifiek om grid systems te bouwen Ter vervanging van float en inline-block Flexbox Flexible box Momenteel een W3C Candidate Recommendation Geschikt voor de grote lijnen van een applicatie of interface Nog niet overal ondersteuning CSS3 | Flexbox & Grid
- 24. HTML5
- 25. HTML5 Niet zomaar nieuwe syntax Het is een specificatie Een verzameling van features (ook JS) Nieuwe features (vb. <video>) maken gebruik van een DOM API Je hoeft niets weg te gooien Bestaande applicaties of websites upgraden Meerdere h1’s op één pagina! www.html5rocks.com www.diveintohtml5.info
- 26. HTML5 | Starten Geen complexe doctype syntax meer: <!DOCTYPE html> Nieuwe elementen: <header>, <nav>, <section>, <article>, <aside>, <footer> … en nog veel meer <hgroup> element niet meer in gebruik Nieuwe features: Geolocatie, Localstorage, Canvas, Video, Native formulier validatie (input types) Fallback (polyfill) voorzien voor IE versies lager dan 9: html5shim
- 27. HTML5 | Stukje geschiedenis Voor HTML5 overmatig gebruik van <div>: divitis Structuur door middel van ID’s en klasses <div id=”header”> <div id=”nav”></div> </div> <div id=”content”></div> <div id=”footer”></div> Niet zichtbaar voor browsers, zoekmachines en screen readers Slechts één h1 per pagina
- 28. HTML5 | Nieuwe elementen Gebruik van minder div’s Betere leesbaarheid: Voor ontwikkelaar Voor browsers, zoekmachines, screen readers, … Onze pagina kan er nu zo gaan uitzien: <header> <nav></nav> </header> <section></section> <footer></footer>
- 29. HTML5 | Nieuwe elementen <header> <nav> <section> <article> <aside> <footer>
- 30. HTML5 | Role attribuut Via het role attribuut kan je aan een element meegeven waarvoor dit dient. Als we onze code van daarnet nemen: <header> <nav role=”navigation”></nav> </header> <section role=”main”></section> <footer></footer> En zo zijn er nog veel meer mogelijk opties.
- 31. HTML5 | Input types Automatische validatie Nieuw gedrag (datepicker, range, …) Keyboard past zich aan Nog beperkte support ▪ search ▪ email ▪ url ▪ tel ▪ number ▪ range ▪ date ▪ month ▪ week ▪ time ▪ datetime ▪ datetime-local ▪ color
- 32. HTML5 | Placeholder text Extra hulp bij invullen veld IE10+ Attribuut placeholder <form> <input name="q" placeholder="Go to a Website"> <input type="submit" value="Search"> </form>
- 33. HTML5 | Features detecteren Features detecteren cruciaal Betere gebruikerservaring Progressive enhancement Betere ervaring voor wie bepaalde features ondersteund Eventueel zelfs kijken naar de beschikbare bandbreedte Oplossing: Modernizr
- 34. Voorbeeld met canvas: if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( } HTML5 | Features detecteren
- 35. HTML5 | Geolocatie getCurrentPosition Locatie delen Gebruiker moet bevestigen Kan fout gaan: error detectie Lager dan IE9 geen support Twee types locatiebepaling Driehoeksmeting Via GPS (meer verbruik) Manuele polling navigator.geolocation.getCurrentPosition( show_map, handle_error ) function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; // let's show a map or do something interesting! } function handle_error(err) { if (err.code == 1) { // how about no! } }
- 36. HTML5 | Geolocatie watchPosition Locatie continue updaten Zelfde format als getCurrentPosition succes function error function Toestel zal polling bepalen aan de hand van beweging navigator.geolocation.watchPosition( show_map, handle_error ) function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; // let's show a map or do something interesting! } function handle_error(err) { if (err.code == 1) { // how about no! } }
- 37. HTML5 | Geolocatie positionoptions object Drie properties enableHighAccuracy timeout maximumAge navigator.geolocation.getCurrentPosition( success_calback, error_callback, positionoptions_object ) Voorbeeld positionoptions object: { enableHighAccuracy: true, timeout: 4000, maximumAge: 70000 } geolocatie.html
- 38. HTML5 | Geolocatie - geoPosition.js Geolocatie API is niet uniform W3C Geolocation API IP Geolocation Services API’s of mobile platforms Fallback voor: IE 6, 7, 8 Blackberry Palm OS
- 39. HTML5 | Localstorage (Web Storage) Cookies Iedere HTTP request data Traag / Trager Geen encryptie (tenzij alles SSL) 4 KB data Weinig opslag Localstorage Op client niveau Veel storage Blijft bestaan na page refresh Geen server interventie Key, value pairs
- 40. HTML5 | Localstorage (Web Storage) Specs Key, value pairs (JSON) Opslag adhv key naam Data ophalen via die naam Data = types ondersteund door JS Data opgeslagen als string Data ophalen evt parser gebruiken Set / Get localStorage.setItem(‘bar’, foo); var bar = localStorage.getItem(‘bar’); of localStorage.setItem[‘bar’] = foo; var bar = localStorage.getItem[‘bar’]; localstorage.html
- 41. HTML5 | Localstorage (Web Storage) Limitaties Gemiddeld 5 MB Is suggestie in de spec QUOTA_EXCEEDED_ERR wanneer over limiet Niet mogelijk meer ruimte te vragen
- 42. Vragen?
- 43. Leesvoer HTML ● HTML5 Rocks: http://www.html5rocks.com ● Dive Into HTML5: http://diveintohtml5.info/ ● WTF, HTML and CSS?: http://wtfhtmlcss.com/ CSS ● Magic of CSS: http://adamschwartz.co/magic-of-css/ ● CSS Diner: Where we feast on CSS Selectors: http://flukeout.github.io/ Responsive design ● Grid: http://www.adamkaplan.me/grid/ ● Responsive web design, HiDPI displays and the transition period: http://www.slideshare.net/jandewilde/responsive-web-design- hidpi-displays-and-the-transition-period ● This Is Responsive: http://bradfrost.github.io/this-is-responsive/ ● Twitter Bootstrap (check demo's, docs): http://getbootstrap.com/ ● Zurb Foundation (check demo's, docs): http://foundation.zurb.com/
