Media Queries - CSS Conf Argentina

Transcript

1. MEDIA QUERIES El tamaño no importa @andresgalante
5. Contenido HTML JS CSS
6. Contenido
7. Contenido HTML Contenido Contenido Contenido
8. Contenido Contenido Contenido Contenido Javascript
9. Contenido Contenido Contenido Contenido CSS JSX CSS-in-JS
10. Contenido
11. “La Web es el entorno más hostil imaginable para hacer suposiciones.” Eric A. Meyer
12. -Eric Meyer “The Web is the most hostile environment to developer assumptions imaginable.” Dispositivos
15. Touch != Small
17. Browsers
19. https://en.wikipedia.org/wiki/List_of_web_browsers
20. Usuarios
22. 3,08% Internet Explorer 15,6% Personas con discapacidad mayores de 15 años Source: statcounter Source: WHO
24. “Las suposiciones son engañosas. Si solo pudiéramos ponernos de acuerdo sobre ciertos límites, ¿no sería mucho más fácil controlar el diseño web?” Jeremy Keith, Resilient Web Design
25. LIQUID CAT
26. Responsive design es adaptar nuestro diseño a un browser desconocido, sin asumir dónde va a ser mostrado. Thanks Eric Bailey for this slide
27. Inclusive design es adaptar nuestro diseño a un usuario desconocido, sin asumir quién lo va a usar. Thanks Eric Bailey for this slide too
28. Andrés Galante @andresgalante andresgalante.com Buenos Aires, Argentina Bootstrap
29. Las Media Queries informan el contexto en el que nuestro contenido está siendo mostrado.
30. Contenido Contenido Contenido Contenido
31. Tipo de dispositivo Tamaño y resolución Capacidades del dispositivo
32. Media Type all print speech screen tty tv projection handheld braille embossed aural
33. all print speech screen tty tv projection handheld braille embossed aural Media Type
34. Identifican una característica única y específica. Media Features
35. Screen Dimensions Media Features
 Display Quality Media Features
 Color Media Features
 Interaction Media Features Scripting Media Features 1 2 3 4 5
36. Cuando la ventana del browser de un dispositivo sea como mínimo 30ems, hacé lo siguiente…
37. Media rule keyword @media screen and (min-width: 30em) { declarations } Media type Media feature
38. if @media screen and (min-width: 30em) { declarations }
39. @media (min-width: 30em) or (height: 10em) { declarations } or (o coma)
40. @media (min-width: 30em) , (height: 10em) { declarations } or (o coma)
41. and @media (min-width: 30em) and (height: 10em) { declarations }
42. not @media print and (not(color)) { declarations }
43. @media (min-width: 20em) Range
44. @media (min-width: 20em) Range @media (width >= 20em)
45. https://twitter.com/frivoal/status/1011768912097173505
46. Flexbox & CSS Grids
47. DEMO
48. width height aspect-ratio orientation resolution scan grid update overflow-block overflow-inline color color-index monochrome color-gamut hover any-hover pointer any-pointer Media Queries Level 4 Media Features
49. width height aspect-ratio orientation resolution scan grid update overflow-block overflow-inline color color-index monochrome color-gamut hover any-hover pointer any-pointer Media Queries Level 4 Media Features
50. width height aspect-ratio orientation resolution scan grid update overflow-block overflow-inline color color-index monochrome color-gamut hover any-hover pointer any-pointer Media Queries Level 4 Media Features
51. Kindle no color vertical slow touch
52. https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility
53. Orientation landscape portrait The orientation media feature is portrait when the value of the height media feature is greater than or equal to the value of the width media feature. Otherwise orientation is landscape
54. Hover none hover Indicates that the primary pointing device can’t hover, or that there is no pointing device. Pointing devices that can hover, but for which doing so is inconvenient and not part of the normal way they are used, also match this value. Indicates that the primary pointing device can easily hover over parts of the page.
55. Pointer none coarse fine The primary input mechanism of the device does not include a pointing device. The primary input mechanism of the device includes a pointing device of limited accuracy. The primary input mechanism of the device includes an accurate pointing device
56. DEMO
57. Mobile first Mobile, portrait, slow, coarse, no-hover first.
58. width height aspect-ratio orientation resolution scan grid update overflow-block overflow-inline color color-index monochrome color-gamut hover any-hover pointer any-pointer Media Queries Level 4 Media Features
59. Tipo de dispositivo Tamaño y resolución Capacidades del dispositivo
60. Preferencias
62. Reduce motion no-preference reduce Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the boolean context. Indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.
63. Reduce motion @media (prefers-reduced-motion: reduce) { .thing { animation: none; } }
65. Hight contrast Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation. Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a black-on-white color variation. Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a white-on-black color variation. active black-on-white white-on-black
66. @media(-ms-high-contrast: active) { button { background-color: ButtonFace; } } Hight contrast
67. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
69. Inverted colors
70. Inverted colors @media (inverted-colors) { img, video { filter: invert(100%); } } }
71. Inverted colors
72. Light level dim normal washed The device is used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable to the reader. For example: night time, or a dimly illuminated indoor environment. The device is used in a environment with a light level in the ideal range for the screen, and which does not necessitate any particular adjustment. The device is used in an exceptionally bright environment, causing the screen to be washed out and difficult to read. For example: bright daylight.
74. @custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { /* narrow window styles */ } Custom
75. Container Queries?
77. .componente This is a an example of a title Here goes some body text that the component might have 360px
78. @media (min-width: 400px) { .componente { display: flex; } }
79. .componente 300px 600px This is a an example of a title Here goes some body text that the component might have 900px
80. 300px 600px This is a an exampl e of a title Here goes some body text that the 900px This is a an exampl e of a title Here goes some body text that the .componente .componente
81. .componente 300px 600px This is a an exam ple of a title Here goes some 900px
82. https://elementqueries.com/
83. @element .componente and (min-width: 400px) { :self { display: flex; } }
84. 300px 600px 900px .componente This is a an example of a title Here goes some body text that the .componente This is a an example of a title Here goes some body text that the component might have
85. 300px 600px 900px .componente This is a an example of a title Here goes some body text that the .componente This is a an example of a title Here goes some body text that the
86. https://github.com/WICG/container-queries
87. Deberíamos usar Media Queries?
88. No.
89. No.* * En realidad no creo que sea posible no usar Media Queries, nos ayudan a crear interfaces mas flexibles y accesibles. Pero como les voy a explicar en un rato, es importante mantener nuestro código limpio para poder mantenerlo. Así que les propongo usar media queries como una herramienta para dejar de asumir.
90. “Cuanto más complejas sean nuestras interfaces, más tendremos que pensar para mantenerlas adecuadamente.” Brad Frost
91. CSS es como un osito. Lindo e inofensivo, pero cuando crece te va a comer vivo.
92. Universal design es el diseño de productos que puedan ser utilizados por todas las personas, en la mayor medida posible, sin la necesidad de adaptación o diseño especializado. https://abookapart.com/products/accessibility-for-everyone
93. Universal design Accessible design https://abookapart.com/products/accessibility-for-everyone
94. dispositivos browsers preferencias de usuarios 24.000 150 50 https://opensignal.com/reports/2015/08/android-fragmentation/ https://en.wikipedia.org/wiki/List_of_web_browsers
95. Posibles casos 18milliones
96. ante cualquier usuario. En cualquier contexto y
97. Muchas Gracias ❤ @andresgalante https://github.com/andresgalante/mediaqueries https://www.w3.org/TR/mediaqueries-4/ https://drafts.csswg.org/mediaqueries-5/