Next-generation web styling (Chrome Dev Summit 2019)

Next-generation web styling (Chrome Dev Summit 2019)


Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
    sethlei

    Focus within is really big. I spent wayyy too long working on getting this behavior to work without focus within. Question: which screenreaders were tested with this? Do the major ones work? (jaws, nvda, voiceover for mac)

  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
  10. Post
    Author
  11. Post
    Author
    David Perez

    0:00 Intro

    0:48 1. scroll-snap – native scroll inertia and decelerations
    2:36 2. focus-within – solving focus accessibility within elements
    4:13 3. @media (prefers-*) – considerately adjust your UI/UX to a user's device preferences via Media Query hooks provided by browser
    6:50 4. logical properties – dynamic directionality
    10:00 5. sticky situations – keeping UI within the viewport
    11:44 6. backdrop-filter – style adjustments behind an element
    13:14 7. :is() – formerly :any() && :matches()
    @ 8. Grid-gap
    14:53 9. CSS Houdini – a low-level API for CSS
    19:20 10. typed OM – CSS values as JavaScript objects rather than strings
    20:58 11. Paint API – create your own paint functions using a canvas-like syntax
    27:12 12. animation worklet – off the main thread animation
    30:25 Speed Round – size, aspect-ratio, min(), max(), clamp(), list style type, display: outer inner, CSS regions, CSS modules

  12. Post
    Author
  13. Post
    Author
  14. Post
    Author
  15. Post
    Author
  16. Post
    Author
    Kir Kanos

    sticky is unusable is several situation if the parent has overflow (set to hidden) on it. That's a huuuuuge cave-at. It forces us into tricky ugly hacks.

  17. Post
    Author
  18. Post
    Author
  19. Post
    Author
  20. Post
    Author
  21. Post
    Author
  22. Post
    Author
    Kamil Kseń

    OH MY GOD, finally backdrop-filter is ofiicially supported. I always really wanted to easly make blurred components like in iOS / macOS. Thanks Google, that's a definitely good news!

  23. Post
    Author
  24. Post
    Author
  25. Post
    Author
    CoDEmanX47

    I'm confused… They mentioned CSS regions in the speed round, but to my best knowledge, it is no longer a thing. There was an experimental implementation, but it got removed again (despite Adobe's complaints). They stopped all their efforts after a discussion in 2014 and related chromium issues were closed as won't fix.

    https://groups.google.com/a/chromium.org/forum/m/#!msg/blink-dev/kTktlHPJn4Q/YrnfLxeMO7IJ

    https://bugs.chromium.org/p/chromium/issues/detail?id=315482

    https://chromestatus.com/features/5655612935372800

    //edit: Una replied on Twitter:

    > While there isn't current support, it's still something often brought up in CSSWG meetings. The current draft implementation isn't going to be supported, but it may be something possible in the future (so we had it in our speed round as something w/0 browser support but a vision)

    https://twitter.com/Una/status/1195123883252342790?s=19

  26. Post
    Author
  27. Post
    Author
    Ian

    Why is there no applause between each demo. I would of be the guy out there going "WHOOOO YEAH" wild clapping I had no idea about most of these.

  28. Post
    Author
  29. Post
    Author
  30. Post
    Author
  31. Post
    Author
    Jonathan Feldman

    Just to make sure, in those slides at 18:00 –color is put in the var css function, but it should be –gradientStart, right? Or is defined a unique way?
    Also, I tried to find more information on CSS Regions, but I couldn't find many examples and caniuse said chrome isn't pursuing. Is this out of date https://www.chromestatus.com/feature/5655612935372800, or referring to an old spec?
    And worklets look amazing! Can't wait to try them.

  32. Post
    Author
  33. Post
    Author
  34. Post
    Author
  35. Post
    Author
  36. Post
    Author
  37. Post
    Author
  38. Post
    Author
  39. Post
    Author
  40. Post
    Author
  41. Post
    Author
  42. Post
    Author
  43. Post
    Author
  44. Post
    Author
  45. Post
    Author
  46. Post
    Author
    Ty Correll

    Scroll snapping needs a sensitivity property. Or disabling acceleration property. I find it too sensitive for some users.

  47. Post
    Author
  48. Post
    Author
  49. Post
    Author
  50. Post
    Author
  51. Post
    Author
  52. Post
    Author
  53. Post
    Author
  54. Post
    Author
  55. Post
    Author
    mariusz dziem

    It was interesting, but mu Chrome eats my RAM like black hole 😉 I am thinking about 64GB and 128GB of on my desktop, haha.

  56. Post
    Author
  57. Post
    Author
  58. Post
    Author
  59. Post
    Author
  60. Post
    Author
  61. Post
    Author
  62. Post
    Author
  63. Post
    Author
  64. Post
    Author
  65. Post
    Author
    Yevhen Dyachenko

    Why does Google create it's own CSS instead of adding it to an international standard??? There is no international standard for web. That's why web sucks here in 2019.

  66. Post
    Author
  67. Post
    Author
  68. Post
    Author
  69. Post
    Author
  70. Post
    Author
  71. Post
    Author
  72. Post
    Author
  73. Post
    Author
  74. Post
    Author
  75. Post
    Author
    Samir Emile

    I think like your audience didn't understand the importance of features you are showing them like they are not devs if I was there I would yell for each feature!
    thanks for your efforts and excitement for delivering this to us

  76. Post
    Author
    Andre Clark

    {margin or padding}-{block or inline} ('margin-block: 1rem' for example) does not seem to currently work on chrome 78 or 80, and yet caniuse says both versions can use it. any idea why this is? help?

  77. Post
    Author
  78. Post
    Author
  79. Post
    Author
  80. Post
    Author
  81. Post
    Author
  82. Post
    Author
  83. Post
    Author
    Red Man

    sticky looks amazing!! also backdrop-filter thank God it's finally here, I remember I had to use SVG and a bunch of clipping and stuff to do just that.

    Also properties without using anything else is great! No more "look back to copy the color numer from the top of the file" * -*

  84. Post
    Author
  85. Post
    Author
  86. Post
    Author
  87. Post
    Author
  88. Post
    Author
  89. Post
    Author
  90. Post
    Author
    Björn Morén

    I think it was a major mistake to cater CSS/HTML to graphical design people instead of programmers. They keep adding more and more capabilities to CSS, which makes it seem like more cool graphical designs are possible. Instead it just creates a spec that becomes more and more bloated, and it will still not do exactly what everyone needs. Imagine instead if they had exposed the browser's layout engine through an API, and let us define the CSS syntax ourselves through Javascript. We could extend CSS with whatever stuff we need for each project.

  91. Post
    Author
  92. Post
    Author
  93. Post
    Author
  94. Post
    Author
  95. Post
    Author
  96. Post
    Author
  97. Post
    Author
  98. Post
    Author
  99. Post
    Author
  100. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *