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

Media Queries - CSS Conf Argentina

03dc4f2e26e476958c952505c8d8f563?s=47 Andres Galante
July 14, 2018
370

Media Queries - CSS Conf Argentina

03dc4f2e26e476958c952505c8d8f563?s=128

Andres Galante

July 14, 2018
Tweet

Transcript

  1. MEDIA QUERIES El tamaño no importa @andresgalante

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

  16. None
  17. Browsers

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

  20. Usuarios

  21. None
  22. 3,08% Internet Explorer 15,6% Personas con discapacidad mayores de 15

    años Source: statcounter Source: WHO
  23. None
  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

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

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

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

    styles */ } Custom
  75. Container Queries?

  76. None
  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/