CSS - Media queries o tamanho não importa

Transcript

1. MEDIA QUERIES O tamanho não importa @andresgalante
3. pt-AR
5. Conteúdo HTML JS CSS
6. Conteúdo
7. Conteúdo HTML Conteúdo Conteúdo Conteúdo
8. Conteúdo Conteúdo Conteúdo Conteúdo Javascript
9. Contenido Contenido Contenido Contenido CSS JSX CSS-in-JS
10. Conteúdo
11. “A Web é o ambiente mais hostil que se pode imaginar para se fazer suposições” 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. Usuários
22. 2,72% Internet Explorer 15,6% Pessoas com deficiências maiores de 15 anos Source: statcounter Source: WHO
23. $ 24.600.000 11%
24. Lei 10.098/2000 Direito das Pessoas com Deficiência Decreto nº 5.296 2 de dezembro de 2004 $
27. “As suposições são enganosas. Se pudéssemos concordar apenas com certos limites, não seria muito mais fácil controlar o web design?” Jeremy Keith, Resilient Web Design
28. LIQUID CAT
29. Responsive design é adaptar nosso projeto a um navegador desconhecido, sem assumir onde ele será exibido. Thanks Eric Bailey for this slide
30. Inclusive design é adaptar nosso projeto a um usuário desconhecido, sem assumir quem o usará. Thanks Eric Bailey for this slide too
31. Andrés Galante @andresgalante Buenos Aires, Argentina Bootstrap
32. Os Media Queries informam o contexto em que nosso conteúdo está sendo exibido.
33. Conteúdo Conteúdo Conteúdo Conteúdo
34. Tipo de dispositivo Tamanho e resolução Capacidades do dispositivo
35. Media Type all print speech screen tty tv projection handheld braille embossed aural
36. all print speech screen tty tv projection handheld braille embossed aural Media Type
37. Identificam uma característica única e específica. Media Features
38. Screen Dimensions Media Features
 Display Quality Media Features
 Color Media Features
 Interaction Media Features Scripting Media Features 1 2 3 4 5
39. Quando a janela do navegador de um dispositivo tiver pelo menos 300px, faça o seguinte…
40. Media rule keyword @media screen and (min-width: 300px) { declarations } Media type Media feature
41. if @media screen and (min-width: 300px) { declarations }
42. @media (min-width: 300px) or (height: 500px) { declarations } or (o coma)
43. @media (min-width: 300px) , (height: 500px) { declarations } or (o coma)
44. and @media (min-width: 300px) and (height: 500px) { declarations }
45. not @media print and (not(color)) { declarations }
46. @media (min-width: 20em) Range
47. @media (min-width: 20em) Range @media (width >= 20em)
48. https://twitter.com/frivoal/status/1011768912097173505
49. Flexbox & CSS Grids
50. DEMO
51. 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
52. 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
53. 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
54. Kindle no color vertical slow touch
55. https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility
56. 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
57. 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.
58. 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
59. DEMO
60. Mobile first Mobile, portrait, slow, coarse, no-hover first. https://css-tricks.com/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first/
61. 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
62. Tipo de dispositivo Tamanho e resolução Capacidades do dispositivo
63. Preferências
65. 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.
66. Reduce motion @media (prefers-reduced-motion: reduce) { .thing { animation: none; } }
68. 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
69. @media(-ms-high-contrast: active) { button { background-color: ButtonFace; } } Hight contrast
70. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
72. Inverted colors
73. Inverted colors @media (inverted-colors) { img, video { filter: invert(100%); } } }
74. Inverted colors
75. 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.
77. @custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { /* narrow window styles */ } Custom
78. Container Queries?
80. .componente This is a an example of a title Here goes some body text that the component might have 360px
81. @media (min-width: 400px) { .componente { display: flex; } }
82. .componente 300px 600px This is a an example of a title Here goes some body text that the component might have 900px
83. 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
84. .componente 300px 600px This is a an exam ple of a title Here goes some 900px
85. https://elementqueries.com/
86. @element .componente and (min-width: 400px) { :self { display: flex; } }
87. 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
88. 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
89. DEMO
90. Tips: 1- Evite usar width 2- Tente usar grid ou flex 3- Container queries
91. https://github.com/WICG/container-queries
92. Devemos usar Media Queries?
93. No.
94. No.* * Na verdade, não acho que seja possível não usar as Consultas de mídia, elas nos ajudam a criar interfaces mais flexíveis e acessíveis. Mas como eu vou explicar para você daqui a pouco, é importante manter nosso código limpo para mantê-lo. Por isso, proponho usar as consultas de mídia como uma ferramenta para parar de assumir.
95. “Quanto mais complexas forem as nossas interfaces, mais temos que pensar para mantê-las adequadamente” Brad Frost
96. CSS é como um ursinho. Fofo e inofensivo, mas quando crescer vai comer você vivo.
97. Universal design é o design de produtos que podem ser usados por todas as pessoas, na maior medida do possível, sem a necessidade de adaptação ou design especializado. https://abookapart.com/products/accessibility-for-everyone
98. Universal design Accessible design https://abookapart.com/products/accessibility-for-everyone
99. dispositivos browsers preferências de usuários 24.000 150 50 https://opensignal.com/reports/2015/08/android-fragmentation/ https://en.wikipedia.org/wiki/List_of_web_browsers
100. Casos possíveis 18milhões
101. para qualquer usuário. Em qualquer contexto e
102. Muchas Gracias ❤ @andresgalante https://github.com/andresgalante/mediaqueries https://www.w3.org/TR/mediaqueries-4/ https://drafts.csswg.org/mediaqueries-5/ https://css-tricks.com/author/agalante/
103. https://css-tricks.com/author/agalante/
104. We are hiring!