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

How to use CSS to make your App look amazing and be accessible on any device

How to use CSS to make your App look amazing and be accessible on any device

Oracle code one 2019

03dc4f2e26e476958c952505c8d8f563?s=128

Andres Galante

September 16, 2019
Tweet

More Decks by Andres Galante

Other Decks in Technology

Transcript

  1. MEDIA QUERIES How to use CSS to make your App

    look amazing and be accessible on any device @andresgalante
  2. Hola!

  3. None
  4. None
  5. Content HTML JS CSS

  6. Content

  7. Content HTML Content Content Content

  8. Content Content Content Content Javascript

  9. Contenido Contenido Contenido Contenido CSS JSX CSS-in-JS

  10. Content

  11. “The web is the most hostile environment to developer assumptions

    imaginable.” Eric A. Meyer
  12. -Eric Meyer “The Web is the most hostile environment to

    developer assumptions imaginable.” Devices
  13. None
  14. None
  15. Touch != Small

  16. None
  17. Browsers

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

  20. Users

  21. None
  22. 2,87% Internet Explorer 15,6% Population with some form of disability

    Source: statcounter Source: WHO
  23. $ 37,627,800 12.1% % 4,427,000 10.2% Population with disability

  24. American Disabilities Act https://www.ada.gov/ Section 508 Amendment to the Rehabilitation

    Act of 1973 https://www.section508.gov/ $
  25. None
  26. None
  27. we are privileged

  28. “Assumptions are beguiling. If only we could agree on certain

    boundaries, then wouldn’t web design be so much easier to control?” Jeremy Keith, Resilient Web Design
  29. LIQUID CAT

  30. Responsive Design is adapting our design to an unknown browser

    without assuming where it’ll be accessed. Thanks Eric Bailey for this slide!
  31. Inclusive design is adapting our design to an unknown user

    without assuming who will use it. Thanks Eric Bailey for this slide too.
  32. Andrés Galante @andresgalante Buenos Aires, Argentina Bootstrap

  33. Media queries inform us about the context in which our

    content is being displayed
  34. Content Content Content Content

  35. Device Type Size and Quality Device Capabilities

  36. Media Type all print speech screen tty tv projection handheld

    braille embossed aural
  37. all print speech screen tty tv projection handheld braille embossed

    aural Media Type
  38. Tests a single, specific feature of the device Media Features

  39. Screen Dimensions Media Features
 Display Quality Media Features
 Color Media

    Features
 Interaction Media Features Scripting Media Features 1 2 3 4 5
  40. When a device's browser window is at least 300px, do

    the following…
  41. Media rule keyword @media screen and (min-width: 300px) { declarations

    } Media type Media feature
  42. if @media screen and (min-width: 300px) { declarations }

  43. @media (min-width: 300px) or (height: 500px) { declarations } or

    (or a comma)
  44. @media (min-width: 300px) , (height: 500px) { declarations } or

    (or a comma)
  45. and @media (min-width: 300px) and (height: 500px) { declarations }

  46. not @media print and (not(color)) { declarations }

  47. @media (min-width: 20em) Range

  48. @media (min-width: 20em) @media (width >= 20em) Range

  49. https://twitter.com/frivoal/status/1011768912097173505

  50. Flexbox & CSS Grids

  51. DEMO

  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. 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
  55. Kindle no color vertical slow touch

  56. https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility

  57. 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
  58. 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.
  59. 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
  60. DEMO

  61. Preferences

  62. None
  63. 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.
  64. @media (prefers-reduced-motion: reduce) { .thing { animation: none; } }

    Reduce motion
  65. None
  66. High 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
  67. @media(-ms-high-contrast: active) { button { background-color: ButtonFace; } } High

    contrast
  68. None
  69. Inverted colors

  70. @media (inverted-colors) { img, video { filter: invert(100%); } }

    } Inverted colors
  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. Tips 1- Avoid using width 2- Try using grid or

    flex 3- Use container queries (EQCSS)
  87. https://github.com/WICG/container-queries

  88. Should we use Media Queries?

  89. No.

  90. No. Maybe.

  91. “The more complex our interfaces are, the more we have

    to think to maintain them properly” Brad Frost
  92. CSS is like a bear cub. Cute and inoffensive, but

    when he grows he’ll eat you alive.
  93. Universal design is the design of products to be usable

    by all people, to the greatest extent possible, without the need for adaptation or specialized design. https://abookapart.com/products/accessibility-for-everyone
  94. Universal design Accessible design https://abookapart.com/products/accessibility-for-everyone

  95. android devices browsers user preferences 24,000 150 50 https://opensignal.com/reports/2015/08/android-fragmentation/ https://en.wikipedia.org/wiki/List_of_web_browsers

  96. Possible cases 18million

  97. before any user. In any context and

  98. Muchas Gracias ❤ @andresgalante

  99. https://css-tricks.com/author/agalante/ @andresgalante

  100. Mobile first Mobile, portrait, slow, coarse, no-hover first. https://css-tricks.com/mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first/

  101. 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
  102. Device Type Size and Quality Device Capabilities