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

Oracle code one 2019

Transcript

1. MEDIA QUERIES How to use CSS to make your App look amazing and be accessible on any device @andresgalante
2. Hola!
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
15. Touch != Small
17. Browsers
19. https://en.wikipedia.org/wiki/List_of_web_browsers
20. Users
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/ $
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
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
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
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.
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. 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