Cours du 28 avril 2017, http://www.eaa-la-chaux-de-fonds.ch/

1. Séminaire
Web
eaa – 28.04.2017 session 1 / 5
Manuel Schmalstieg

2. Manuel
Schmalstieg
HEAD
ERACOM

9. cours-web.ch

10. CSS
Un rapide état des lieux

12. 1996

13. contenu
≠
présentation

14. CSS1 =
essentiellement les
propriétés de rendu
typographique du
texte

15. 1998

16. CSS 2 =
~ 70 propriétés
supplémentaires

19. CSS3

20. CSS 3 =
modules
indépendants

21. p.ex.
WebFonts,
Media Queries,
Flexbox,
Backgrounds &
Borders

22. 2010Révolution CSS3

23. CSS Bling

24. CSS Bling
• Les dégradés de couleurs
• Les ombres portées (box-shadow)
• L’opacité (opacity)
• Les bords arrondis (border-radius)
• Les fontes web (@fontface)

25. Do websites need to
look exactly the
same in every
browser?

26. http://dowebsites
needtolookexactly
thesameinevery
browser.com/

28. Do websites need to
be experienced
exactly the same in
every browser?

29. http://dowebsites
needtobeexperienced
exactlythesamein
everybrowser.com/

31. Webfonts

38. Rencontres de
Lure (2012)

41. a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ( ; : ? ! $ ¢ £ ¥ & * ) { ö ü å ø ç }

43. a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ( ; : ? ! $ ¢ £ ¥ & * ) { ö ü å ø ç }

47. Metaflop,
Metapolator,
Prototypo

50. OSP.kitchen

55. Mise en page & CSS

57. 2000 - 2004 :
table  float

60. Responsive Web
Design
Concepts et implications

73. CSS Grid Systems

75. Flexbox

76. “Working Draft”
(depuis 2009)

“Candidate
Recommendation”
Flexbox

77. bien supporté
par les
navigateurs en
2016!
Flexbox

80. GSS
Grid Style Sheets

81. GSS
Grid Style Sheets

82. GSS is a CSS
preprocessor & JS
runtime that
harnesses
Cassowary.js

83. Technologie liée
à la startup
The Grid

84. Slogan:
“The Grid Is
The Website
Of The Future:
It Builds Itself”

86. CSS Grid Layout

87. CSS Grid Layout
proposé en 2011 par
Microsoft

88. CSS Grid Layout
implémenté
à fins de test
dans IE 10 et 11

89. CSS Grid Layout
repris par le W3C,
en cours de
développement

90. CSS Grid Layout

94. cours-web.ch