State of CSS

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 193

  • @Brunoenribeiro
    @Brunoenribeiro 2 года назад +106

    So happy Jessie Pinkman got into web dev 😝 Thanks Adam, this video was splendid! Super stoked to test all this new stuff

    • @AdamArgyleInk
      @AdamArgyleInk 2 года назад +20

      lolol, you're not the first to say I look like that guy. I agree in this video especially I look like him.
      Cookin up UI hehe

    • @ManojKumar-op7ot
      @ManojKumar-op7ot 2 года назад +5

      Haha. First thing that came up in my mind. The question is where is Walter White in that UI kitchen?

  • @khashayarr
    @khashayarr 2 года назад +173

    Adam makes me a million times more excited about CSS! Such a gem!

  • @maxjf1
    @maxjf1 2 года назад +10

    This :has selector its surely a game changer. This will greatly impact how css is used, and avoid many backend / js processing

  • @Stoney_Eagle
    @Stoney_Eagle 2 года назад +56

    The man, the myth, the legend behind the challenges 😋

    • @spiritual5750
      @spiritual5750 2 года назад

      can you share his work? i am just a noob trying to learn

  • @kissu_io
    @kissu_io 2 года назад +7

    Ma man, CSS experts will be quite rare in the upcoming years. :D

  • @montebont
    @montebont 2 года назад +20

    Thanks Adam! Finally perceptually consistent color spaces like CIE L*a*b. Thanks to everyone in the team and keep up the good works. But: it also means browsers should not assume sRGB but must be aware of and use "local" custom monitor profiles...Or at least Adobe RGB.

  • @avneet12284
    @avneet12284 2 года назад +11

    Omg, this is phenomenal. I watched this at 0.75x speed whereas normally I am at 1.5x

  • @TheRyanSmee
    @TheRyanSmee 2 года назад +9

    Thanks for the super thorough breakdown. I have been buzzing for fully supported container queries for the longest time - can’t wait!

  • @lukasluftlaufer1093
    @lukasluftlaufer1093 2 года назад +1

    Everyone gangster, until older safari versions need to be supported. 😎😵
    Still... What a fantastic presentation!!! Really stoked about these new features

  • @thecodingfoundation
    @thecodingfoundation 2 года назад +3

    Maybe there should also be a focus on phasing out stuff that's inconsistent and/or old, to remove bloat and hopefully end up with a CSS language that doesn't require "moz-" and all sorts of stuff.
    Consistency between things like "font-size" and "text-color" would also be nice.

  • @wes337
    @wes337 2 года назад +21

    inert finally gives us a solid fix for the "scrolling the main page while a modal is open" problem!

  • @danko95bgd
    @danko95bgd 2 года назад +23

    Amazing stuff!
    That css relative one is great, no need for css in js bullshits, just convert dumb hex value to hsl for example and up brightness easily.

    • @AdamArgyleInk
      @AdamArgyleInk 2 года назад +1

      i'm soooo excited for the relative color syntax. so powerful and will save so much boilerplate

  • @haroldpepete
    @haroldpepete 2 года назад +1

    the last one is very powerful and it's really helpful, you don't have to search in children for someone who class is something, greattt

  • @jugibur2117
    @jugibur2117 2 года назад +2

    Wow, on the one hand I'm excited about so many new possibilities - on the other hand I'm afraid that at some point I won't be able to get it all into my head....

  • @seth111yta1
    @seth111yta1 2 года назад +3

    3:15 people died waiting for this but celebrate its here now

  • @DrewIsFail
    @DrewIsFail 2 года назад +4

    It's interesting that a lot of things that had to be managed by js, like the container functionality, are possible via pure css now

  • @nabiih
    @nabiih 2 года назад +8

    @container is a game changer. So excited to try it!

  • @oskarzoch8946
    @oskarzoch8946 2 года назад

    I've been doing this color stuff for some time now with Sass, but I've always missed this functionality in real time in browser. CSS is getting better and better every year, this is so exciting!

  • @megairrational
    @megairrational 2 года назад +2

    Adam man, I love your excitement about CSS and web in general. In this video, in the CSS podcast, in UI Challenges, …. Many thanks 🙏

  • @jacobstamm
    @jacobstamm 2 года назад +12

    This dude’s energy is second to none.

    • @lewis4493
      @lewis4493 2 года назад +1

      I find it obnoxious 😅

  • @_polargaming
    @_polargaming 2 года назад +2

    Most excited about the @container query and the :has selector

  • @danielradosa
    @danielradosa 2 года назад +1

    yall just made styling a whole new job position.

  • @AmenraRobinson
    @AmenraRobinson 2 года назад +1

    Hey it's that one dude! The living CSS Encyclopedia.

  • @szynszyliszys
    @szynszyliszys 2 года назад +1

    I love how CIE LAB looks spot on like a simplified map of Poland ✨

  • @ehudkirsh766
    @ehudkirsh766 2 года назад

    1:39 - "Just let it load, let it load, whenever it wants to assign to one of your predefined layer nodes" - classy, I like it XD

  • @PaulMcCannWebBuilder
    @PaulMcCannWebBuilder 2 года назад

    A wowie wow wow wow for this video.
    One of Google's smartest acquisitions was Adam Arglye.

  • @youknowwho4994
    @youknowwho4994 2 года назад

    Not even bored a sec. Pure bliss to watch.

  • @Ana-mn5io
    @Ana-mn5io Год назад

    Thanks i love the way Adam and Una presents 💚💛💙❤

  • @elementiro
    @elementiro 2 года назад

    All that stuff with color is cool (except gradients, because sRGB still look the best) but minor, I would say. But :has() seems revolutionary! I would say it's more important change than adding grid layout few years ago.

  • @javiasilis
    @javiasilis 2 года назад

    Holey Moley! So many small yet powerful features coming up.

  • @DaviAreias
    @DaviAreias 2 года назад +2

    Cool, but how do we center a div?

  • @fabianwohlfart7249
    @fabianwohlfart7249 2 года назад +1

    It makes me dizzy that he does not use / hides his right hand under the table. i know its for the next and prev slide button, but can't you add just a red big button in the table and both of his hands on top of it.

  • @Gato-Laranja-Mts
    @Gato-Laranja-Mts 2 года назад

    CSS is getting tricky with so many variations and options to choose from. Powerful, but the learning curve is increasing. Not complaining, just mentioning.

  • @JeyPeyy
    @JeyPeyy 2 года назад

    the color space stuff is so hard to grasp, I had to skip that part after a while of my mind getting blown. but it sounds really cool!

  • @Lucsy3012
    @Lucsy3012 2 года назад +4

    It is indeed a great time to be CSS nerd 🤓

  • @JeyPeyy
    @JeyPeyy 2 года назад +1

    damm, can't believe we had to wait this long for subgrids. Good job Microsoft

  • @msjahun
    @msjahun 2 года назад +3

    What a time to be a web developer

  • @aarond9563
    @aarond9563 2 года назад

    I haven't used CSS in years, but as a designer this was pretty cool.

  • @_whatistruth
    @_whatistruth 2 года назад +2

    Waiting for :has and those new viewport height variants. 😀

  • @dmitriyobidin6049
    @dmitriyobidin6049 2 года назад +2

    Tbh, there is to much emphasis on colors... We still can't reliably layout our pages to be adaptive and responsive on all devices, but now we will fight with designers and all their "creative" ideas.
    It would be amazing to have more layout tools like @container in development and not most of those colors things...
    16:06 So, instead of adding a modal attribute that would work only at the component level and would do the same thing we now have to manually insert inert attribute into some parent container when we want to show a modal dialog? Why?!

  • @VarunGupta3009
    @VarunGupta3009 2 года назад +2

    I'm bursting with excitement!

  • @AtariKafa
    @AtariKafa 2 года назад +1

    color space feature made me happy.... 😊

    • @puffin_000
      @puffin_000 2 года назад

      Reis sende mi web development yapıyorsun?

  • @talorlanczyk4933
    @talorlanczyk4933 2 года назад

    Finally we waited for this for so long!!
    Personally i waited for the has selector

  • @blessdarah1256
    @blessdarah1256 2 года назад

    I'm enjoying how the CSS is becoming more powerful by the day.

  • @AquaDiskoteque
    @AquaDiskoteque 2 года назад +1

    Gosh! Nice upd) we waiting for this sooo long)
    :watermelon:

  • @thecoderabbi
    @thecoderabbi 2 года назад +1

    Love your vibes Adam!

  • @EliotNash
    @EliotNash 2 года назад +1

    Super excited for :has

  • @philkunz
    @philkunz 2 года назад +1

    yeah, big blow though: @container queries can't see past slot borders, meaning its breaking with the logic of how css variables behave.

  • @agent-33
    @agent-33 2 года назад

    Lots of new cool stuffs to make CSS easier. I hope these will lessen my hate for CSS.

  • @agsrf6479
    @agsrf6479 2 года назад

    Please add masonry grid template rows for other browsers too, not only firefox!

  • @TomHermans
    @TomHermans 2 года назад +3

    Thanks Adam. Great overview. It's indeed great to be working on the web.

  • @adaai2384
    @adaai2384 2 года назад

    `accent-color` is really cool. You have no excuse not to use native controls now.

  • @Joaovtrc
    @Joaovtrc 2 года назад

    Color contrast is so amazing, can't wait to use it!

  • @7sq
    @7sq 2 года назад

    What is the reason my chrome book is slower ? Why is my chrome book not suported past June ?

  • @stea27
    @stea27 2 года назад

    So many awesome ideas. Now this is innovation.

  • @d-o-n-u-t
    @d-o-n-u-t 2 года назад

    I'm used to the sRGB gradients, so I think they actually kinda look better...

  • @reginaldooliveira0817
    @reginaldooliveira0817 2 года назад +1

    Congratulations on the performance in this creativity, leveraging success with objectivity; Perfect design. Mutual success and happiness.

  • @superatomic9761
    @superatomic9761 2 года назад +1

    can anyone explain to me why we shouldnt just open up the rendering engine (as safely as possible), to just let people make their own features?
    people are always going to want new CSS rules. why are browsers and web standards spending any time on new rules at all? why not spend all of their time getting Houdini up and running?

  • @pawekoaczynski4505
    @pawekoaczynski4505 2 года назад

    the accent color on native element is huge

  • @jerrygreenest
    @jerrygreenest 2 года назад

    Finally we're back in 2007 where we can again design our websites with tables, ukmm... I mean grids.

  • @Draaack
    @Draaack 2 года назад +1

    So damn cool, thanks Adam and Chrome devs.

    • @3nt3_
      @3nt3_ 2 года назад

      Also the other browser devs

  • @KangJangkrik
    @KangJangkrik 2 года назад +1

    Yo Adam Argyle, brother of Felix Argyle 🤟

  • @BenjaminDenverstone
    @BenjaminDenverstone 2 года назад +1

    I'm wondering when we might get CSS4. I'm learning Full Stack Web Development and CSS3 is interesting. It can be a little hard to understand (Grid, Flex-box, Block, Inline) but it's an important styles language nonetheless.

    • @longingbydesign
      @longingbydesign 2 года назад +5

      If there's ever going to be a CSS 4 it's going to be merely a marketing name, not more. CSS 3 is a living standard, there is no need to ever increase the version number.

    • @delulu6969
      @delulu6969 2 года назад +3

      No, there's no CSS Level 4. You can read the W3C spec on CSS Snapshot. What we're having are modules, ie features, which will have their own levels developed forward with time. There're already level 4 and 5 modules. For example, the new extended color space is in CSS Color Module Level 4. In CSS Color Module Level 5, they're speccing out mainly the features to modify colors relatively like how we have been doing with Sass but it will be native in the future if committees and every browser get to an agreement.

  • @adamleblanc5294
    @adamleblanc5294 2 года назад

    It's November 23rd and I still don't have good subgrid or @container support 😢

  • @boxy3087
    @boxy3087 2 года назад

    what browser currently supported by [fullbleed-start]?

  • @AllanLange
    @AllanLange 2 года назад

    color-contrast() and how it is able to select from a list of predefined colors or default to black or white in order to pass!! 🤯

  • @TheHehhoi
    @TheHehhoi 2 года назад

    Really excited about the Colrv1 Fonts and the color-contrast(). One question that came to mind: Why are many of the features currently available only for the experimental Safari?

    • @AdamArgyleInk
      @AdamArgyleInk 2 года назад +1

      IMO, Safari and iOS have extremely high quality screens that are capable of spectacular color, it's in their best interested to give the web full power to showcase these colors for users, so users continue to believe things look best on their devices.

  • @edgarfrias9460
    @edgarfrias9460 2 года назад +5

    Awesome work! Thanks to all devs involved to push boundaries for css! Css roks! :D

  • @cg219
    @cg219 2 года назад

    Is there an idea of how long until these are stable ??

  • @fave1201
    @fave1201 2 года назад +1

    Awesome presentation 👏

  • @SalomDunyoIT
    @SalomDunyoIT 2 года назад +1

    that means, we can animate background gradients, right?

    • @AdamArgyleInk
      @AdamArgyleInk 2 года назад +2

      that one is unlocked with @property, shipped only in Chrome so far

  • @1306dk
    @1306dk 2 года назад +1

    Wow..very exciting stuff !!

  • @nro337
    @nro337 2 года назад +1

    Thank you!

  • @abyssoftus
    @abyssoftus 2 года назад

    Wonderful presentation.

  • @craziestdavid15
    @craziestdavid15 2 года назад

    Which software could let me make video like this

  • @snapstromegon
    @snapstromegon 2 года назад +2

    Please, PLEASE make CSS Nesting a thing...

  • @jellyl331
    @jellyl331 2 года назад +1

    Excited about these improvements to CSS !

  • @thatanimeweirdo
    @thatanimeweirdo 2 года назад +1

    I am so hyped for the future!

  • @DannyFJhonstonB
    @DannyFJhonstonB 2 года назад +1

    Great update! Thank you!

  • @davidlipschitz4877
    @davidlipschitz4877 2 года назад

    Nice breakdown! Question - Why would you choose 'accent-color' over regular 'color' to highlight feature text?

  • @dripcaraybbx
    @dripcaraybbx 2 года назад +1

    okLAB out here flexin on em

  • @sabuein
    @sabuein 2 года назад +1

    Thank you.

  • @taufiqsept
    @taufiqsept 2 года назад

    This guy's energy 📈📈📈📈📈

  • @snk-js
    @snk-js 2 года назад

    showing a online bookshelf with the book 1984 in the age of mass surveillance.

  • @derjansan9564
    @derjansan9564 2 года назад

    For some reason I was expecting you to have much bigger eyes :) Great video, thanks.

    • @AdamArgyleInk
      @AdamArgyleInk 2 года назад +1

      lol, they do look tiny in this video. let's blame the lighting

  • @144km
    @144km 2 года назад

    let it load~ let it load~🎵

  • @HansvandeBruggen
    @HansvandeBruggen 2 года назад

    This was surprisingly entertaining!

  •  2 года назад

    thanks adam!! css is the way!

  • @MrgnUTube
    @MrgnUTube 2 года назад

    We want container queries!!!!

  • @heathbruce9928
    @heathbruce9928 2 года назад

    Ok. So when are we going to be able to get font sizes to fit a given space that resize with the viewport?

    • @AdamArgyleInk
      @AdamArgyleInk 2 года назад

      the new container units could help with that! they're like viewport units but for @containers 🤓

    • @heathbruce9928
      @heathbruce9928 2 года назад

      @@AdamArgyleInk could?

    • @AdamArgyleInk
      @AdamArgyleInk 2 года назад

      @@heathbruce9928 they will help you achieve a kind of the style you're after, but not exactly. so they could help with some scenarios but not all.

  • @hrgwea
    @hrgwea 2 года назад

    I can't believe that CSS nesting is still not possible.

  • @bl_int
    @bl_int 2 года назад

    great update

  • @ehsan_kia
    @ehsan_kia 2 года назад +4

    is your right arm okay? :(

  • @ОлексійУкраїна-й7г
    @ОлексійУкраїна-й7г 2 года назад

    about new units amazing

  • @ulziibatn
    @ulziibatn 2 года назад

    Woow. Super good job guys 👍

  • @ptinosq
    @ptinosq 2 года назад

    16:09 inert.css? Doesn't look like CSS to me 😅

  • @GonzaloMassa
    @GonzaloMassa 2 года назад +1

    Finally we get to see your face!

  • @unicornist
    @unicornist 2 года назад

    Now we need an AI to tell us which method to use for the better to achieve a specific goal with all things considered.

  • @francescomaretti8079
    @francescomaretti8079 2 года назад

    Aspect ratio in NOT consistently working on iOS

  • @alystair
    @alystair 2 года назад

    Adam unmasked, always known him for his cartoon character :D