Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS - Media queries o tamanho não importa

CSS - Media queries o tamanho não importa

03dc4f2e26e476958c952505c8d8f563?s=128

Andres Galante

May 06, 2019
Tweet

More Decks by Andres Galante

Other Decks in Technology

Transcript

  1. MEDIA QUERIES O tamanho não importa @andresgalante

  2. None
  3. pt-AR

  4. None
  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
  13. None
  14. None
  15. Touch != Small

  16. None
  17. Browsers

  18. None
  19. https://en.wikipedia.org/wiki/List_of_web_browsers

  20. Usuários

  21. None
  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 $
  25. None
  26. None
  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

  64. None
  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;

    } }
  67. 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

  71. None
  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.
  76. None
  77. @custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { /* narrow window

    styles */ } Custom
  78. Container Queries?

  79. None
  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!