Return to Video

Latest CSS News - Talk.CSS #50

  • 0:00 - 0:08
    yeah okay um hello everybody in the zoom
  • 0:05 - 0:10
    we got zoom bombed just now so I guess
  • 0:08 - 0:12
    it was a good thing that we are we have
  • 0:10 - 0:17
    our own junk channel sorry to whoever's
  • 0:12 - 0:21
    on YouTube so anyway welcome to the 50th
  • 0:17 - 0:23
    edition of top CSS we unfortunately
  • 0:21 - 0:26
    cobia see a thing
  • 0:23 - 0:29
    in singapore for the benefit of our
  • 0:26 - 0:33
    audience some of whom I know you not
  • 0:29 - 0:37
    reasonable we have our own phone for
  • 0:33 - 0:41
    shelter in place most air home or MC or
  • 0:37 - 0:44
    depending Macaulay circuit breaker or CB
  • 0:41 - 0:47
    it is a appropriately Singaporean
  • 0:44 - 0:49
    synonym I assume that only the locals
  • 0:47 - 0:51
    will get the job that's Nivea day so
  • 0:49 - 0:54
    because the situation is like that we
  • 0:51 - 0:56
    asked you online we are even more online
  • 0:54 - 0:59
    than before because we used to be like
  • 0:56 - 1:03
    ok speakers just harder in one Hecker
  • 0:59 - 1:05
    space and everybody else be at home now
  • 1:03 - 1:07
    everybody is at home so amazing so
  • 1:05 - 1:09
    anyway we have we have a Twitter
  • 1:07 - 1:12
    presence Singapore CSS we have a hashtag
  • 1:09 - 1:18
    foxy SS you see if you're lucky tone is
  • 1:12 - 1:23
    a bit of a rocky um necks so you can
  • 1:18 - 1:27
    find us these links nobody uses them so
  • 1:23 - 1:29
    so I have a coupon that we do not
  • 1:27 - 1:30
    tolerate harassment of participants of
  • 1:29 - 1:33
    any kind
  • 1:30 - 1:36
    we got zoom bomb so clearly we you do
  • 1:33 - 1:39
    better but in general I think the rest
  • 1:36 - 1:42
    of you have led some people so yes a
  • 1:39 - 1:45
    conscious behave yourself or your baqia
  • 1:42 - 1:50
    showed us two engineers but as we who
  • 1:45 - 1:54
    will contain the post produced cuts of
  • 1:50 - 1:55
    all the tongs foodie and envy you must
  • 1:54 - 1:59
    also as always
  • 1:55 - 2:03
    sada Cheon who is a keen on Singapore he
  • 1:59 - 2:06
    is not around in this particular me that
  • 2:03 - 2:09
    this particular time but know that we
  • 2:06 - 2:12
    will always give him a mention because
  • 2:09 - 2:14
    he printed the first scoffs because they
  • 2:12 - 2:18
    say most yeses ever heck
  • 2:14 - 2:23
    we also have friends we cannot well
  • 2:18 - 2:28
    offshore our system it that Singapore
  • 2:23 - 2:32
    yes we still going on I think
  • 2:28 - 2:34
    occasionally in if there is every month
  • 2:32 - 2:38
    there are middle of the man we are sorry
  • 2:34 - 2:42
    man our best friend me back in school we
  • 2:38 - 2:44
    are knowledgeable we have a link we have
  • 2:42 - 2:46
    assigned monitors an event hosted a man
  • 2:44 - 2:49
    in the webs it has not changed for the
  • 2:46 - 2:52
    past four months color the man by
  • 2:49 - 2:54
    anybody not everybody might my favorite
  • 2:52 - 2:56
    segment is a colored man so in case you
  • 2:54 - 2:59
    don't know there are a hundred and forty
  • 2:56 - 3:02
    eight named CSS colors which is enough
  • 2:59 - 3:05
    for twelve years plus per class worth of
  • 3:02 - 3:08
    meetups we are at about year for so
  • 3:05 - 3:11
    don't worry loss or constable colonel
  • 3:08 - 3:14
    man is blue it's rather longer names but
  • 3:11 - 3:17
    remember when you are using a CSS color
  • 3:14 - 3:20
    no spaces no dashes no underscores it
  • 3:17 - 3:23
    just one single long word you can read
  • 3:20 - 3:26
    it however you want you can say Khan
  • 3:23 - 3:28
    flow blue but like I think it's
  • 3:26 - 3:30
    compatible so if you don't like expose
  • 3:28 - 3:32
    you don't like RGB air quotes you can
  • 3:30 - 3:35
    use this English word beautiful English
  • 3:32 - 3:38
    word contra very come from coneflower
  • 3:35 - 3:40
    bro is a shade of a medium to light blue
  • 3:38 - 3:43
    containing relatively little green
  • 3:40 - 3:45
    competitive through this hue was one of
  • 3:43 - 3:48
    the favorites of a famous Dutch painter
  • 3:45 - 3:51
    johannes vermeer i think i put on his
  • 3:48 - 3:53
    name but never mind the most valuable of
  • 3:51 - 3:54
    blue sapphires are also called
  • 3:53 - 3:58
    cornflower blue this is a very valuable
  • 3:54 - 4:01
    color here named CSS colors actually
  • 3:58 - 4:02
    were food from the x11 colors so this
  • 4:01 - 4:06
    control blue was further
  • 4:02 - 4:08
    initial set of 68 that was committed to
  • 4:06 - 4:13
    the x11
  • 4:08 - 4:16
    repo on the 19th of august 1985 just
  • 4:13 - 4:21
    useless trivia that you probably never
  • 4:16 - 4:26
    need to know so the agenda for today is
  • 4:21 - 4:29
    if the ever CSS news of a month and
  • 4:26 - 4:31
    very long oh my god I always want that
  • 4:29 - 4:34
    is it is it because everybody is stuck
  • 4:31 - 4:36
    in woman they like oh yeah let's just
  • 4:34 - 4:38
    push in Jersey and write more spectrum I
  • 4:36 - 4:40
    did everything I don't know really long
  • 4:38 - 4:43
    and then a lot of people wrote because I
  • 4:40 - 4:45
    hope people make coat pants so I'll just
  • 4:43 - 4:48
    highlight a few of the more interesting
  • 4:45 - 4:53
    ones yeah and then we have watch new
  • 4:48 - 4:55
    HTML by our original co-founder
  • 4:53 - 4:57
    Christina Danny all the way from
  • 4:55 - 5:00
    Melbourne so nice like in the wrong time
  • 4:57 - 5:05
    zone but hi hi Chris thanks for coming
  • 5:00 - 5:08
    and we have a intervention by also
  • 5:05 - 5:10
    familiar locals because they'll who
  • 5:08 - 5:12
    probably is like bouncing his daughter
  • 5:10 - 5:17
    on his knee right now so I'm gonna move
  • 5:12 - 5:26
    on to the news let's see okay Gary of
  • 5:17 - 5:33
    these share profits cream sue me so I'm
  • 5:26 - 5:40
    really okay HTML and CSS news for a
  • 5:33 - 5:41
    month of me so 35 Firefox 35 was
  • 5:40 - 5:46
    released me
  • 5:41 - 5:47
    so a bunch of bug fixes lots of blah
  • 5:46 - 5:49
    blah blah the only thing I wanna talk
  • 5:47 - 5:52
    about is mean function meant next
  • 5:49 - 5:55
    function and claim functions so these
  • 5:52 - 5:56
    mathematical okay no any mathematical
  • 5:55 - 6:01
    but like CSS functions have been
  • 5:56 - 6:02
    implemented in 75 so it allows for range
  • 6:01 - 6:05
    of values which is really cool because
  • 6:02 - 6:08
    we never used to be able to avenge the
  • 6:05 - 6:10
    first inkling of a range of to actually
  • 6:08 - 6:13
    do you have this grid you could use a
  • 6:10 - 6:15
    min max function is in the context of
  • 6:13 - 6:17
    greet and now that these like a more
  • 6:15 - 6:20
    generalized functions and come out you
  • 6:17 - 6:24
    can use min Max and clap so what mean
  • 6:20 - 6:26
    does is that you accepts one or more so
  • 6:24 - 6:31
    you can put in a bunch of values you
  • 6:26 - 6:35
    will and already it's it won't return
  • 6:31 - 6:39
    you on your use and it's called a
  • 6:35 - 6:42
    maximum a lot value based on my way
  • 6:39 - 6:44
    you want it to be Max is converse so
  • 6:42 - 6:48
    it's like a minimum a lot value and then
  • 6:44 - 6:53
    Clem is like the there's a maximum in so
  • 6:48 - 6:55
    so this is something in 75 so it's like
  • 6:53 - 6:57
    stable so like everyone can go and try
  • 6:55 - 6:59
    you don't have to go and tweet your
  • 6:57 - 7:00
    settings to do it there is something
  • 6:59 - 7:04
    that I want to talk about the thirst
  • 7:00 - 7:08
    require that little so there's also a
  • 7:04 - 7:10
    runner posts from hex not Mozilla where
  • 7:08 - 7:11
    they talk about all the features in in
  • 7:10 - 7:14
    75 so that's quite good
  • 7:11 - 7:17
    let me refresh these because I pushed a
  • 7:14 - 7:21
    change five seconds ago
  • 7:17 - 7:23
    Safari technology preview so it's the
  • 7:21 - 7:25
    Safari bow-window popper logo and I
  • 7:23 - 7:27
    think they do release us every two weeks
  • 7:25 - 7:29
    so it's it's quite nice cause they this
  • 7:27 - 7:31
    is literally I think the the letter sync
  • 7:29 - 7:34
    with us of features that you can find
  • 7:31 - 7:36
    our browser before I do shit on Safari
  • 7:34 - 7:42
    but suffice technology preview is
  • 7:36 - 7:45
    actually pretty good if you want to see
  • 7:42 - 7:48
    implementations on the very new staff so
  • 7:45 - 7:51
    for example there they they put in
  • 7:48 - 7:59
    selectors lever for support for these
  • 7:51 - 8:02
    units LH which is line high and I think
  • 7:59 - 8:11
    so LD h is equal to compute the value of
  • 8:02 - 8:14
    line hi Wow good eh RH is I believe line
  • 8:11 - 8:18
    height of the root element as opposed to
  • 8:14 - 8:20
    the current element there's a samurai
  • 8:18 - 8:28
    Atika on CSS tricks so it's also in in
  • 8:20 - 8:31
    the links West Was see okay CSS colorful
  • 8:28 - 8:35
    Gilad is a bug fixes so no longer to
  • 8:31 - 8:35
    worry this is fun
  • 8:36 - 8:44
    okay the entire process like when you
  • 8:38 - 8:50
    own I love this bar Oh issue report
  • 8:44 - 8:53
    because we've the river of river there
  • 8:50 - 8:56
    is a CSS value known as Reaper
  • 8:53 - 8:58
    I think when chromium first released it
  • 8:56 - 8:59
    as an issue so they like me but
  • 8:58 - 9:03
    everybody before me but in your back
  • 8:59 - 9:05
    again so if I just like this paper I'm
  • 9:03 - 9:08
    like come on guys
  • 9:05 - 9:09
    amazing the get property is finally in
  • 9:08 - 9:11
    Chrome Canary
  • 9:09 - 9:13
    I mean Firefox had it for so long and I
  • 9:11 - 9:16
    just get in so many places and I'm
  • 9:13 - 9:19
    always at the right for back for for for
  • 9:16 - 9:20
    Chrome and now okay okay is in canary so
  • 9:19 - 9:23
    hopefully eventually you'll be like
  • 9:20 - 9:26
    standardized which would be nice and
  • 9:23 - 9:30
    also my not so secret not very secret
  • 9:26 - 9:32
    secret agenda is to solve like have
  • 9:30 - 9:35
    convinced chrome people that they need
  • 9:32 - 9:38
    better great tooling because if you use
  • 9:35 - 9:41
    the if you are you using chrome to do to
  • 9:38 - 9:47
    greet there's no numbers and and stuff
  • 9:41 - 9:50
    like that oh no numbers I mean you it is
  • 9:47 - 9:53
    slightly similar to the what you call
  • 9:50 - 9:57
    Firefox implementation this is a good
  • 9:53 - 10:01
    sign my friends so yeah yes browser News
  • 9:57 - 10:03
    News is surprisingly long cuz they have
  • 10:01 - 10:07
    been months where I had no spec updates
  • 10:03 - 10:11
    but this month we have a long list so
  • 10:07 - 10:13
    speech CSS speech mode you can read it
  • 10:11 - 10:14
    recommendation actually corvini so I
  • 10:13 - 10:16
    don't think a lot of people are we're
  • 10:14 - 10:18
    familiar with CSS P because I it should
  • 10:16 - 10:21
    be thought I mean the proportion of
  • 10:18 - 10:25
    people who are very familiar with screen
  • 10:21 - 10:27
    media readers I also not that many I
  • 10:25 - 10:29
    realized there is around because he
  • 10:27 - 10:32
    actually got into a lot of the
  • 10:29 - 10:33
    accessibility stuff so if you have any
  • 10:32 - 10:36
    questions I believe we can answer them
  • 10:33 - 10:39
    I'm just putting this out there so the
  • 10:36 - 10:45
    the speech mode you basically just
  • 10:39 - 10:51
    defines oral CSS properties so so I
  • 10:45 - 10:54
    guess you can saw lifestyle the way the
  • 10:51 - 10:57
    the screen is gonna go meet the text so
  • 10:54 - 11:00
    that's that's pretty interesting color
  • 10:57 - 11:04
    just one module one very very new spec
  • 11:00 - 11:07
    so what it does is for user user
  • 11:04 - 11:11
    preferred color preferences
  • 11:07 - 11:15
    so you'd have things like color scheme
  • 11:11 - 11:18
    property so like that whether this post
  • 11:15 - 11:20
    color adjusts so it almost put in for
  • 11:18 - 11:23
    light you can force a more accessible
  • 11:20 - 11:27
    color scheme I believe so it's very very
  • 11:23 - 11:29
    new and like initial working drugs and
  • 11:27 - 11:32
    things but then these this is a either
  • 11:29 - 11:35
    pretty cool I always love the color in
  • 11:32 - 11:36
    later modules so maybe I'm biased media
  • 11:35 - 11:38
    queries level five
  • 11:36 - 11:39
    I'm glad data I talked about is a past
  • 11:38 - 11:42
    couple months cause they've been doing
  • 11:39 - 11:45
    ampere work on it so I think they just
  • 11:42 - 11:50
    pushed a new update properties and
  • 11:45 - 11:53
    values API level one so I wanna this is
  • 11:50 - 11:56
    not new like no ambience but I just
  • 11:53 - 11:59
    wanted to point it because CSS tricks
  • 11:56 - 12:02
    also release and I think on the property
  • 11:59 - 12:04
    value I also it was quite new to me
  • 12:02 - 12:07
    because it's so draft is so drunk that
  • 12:04 - 12:09
    right you might not even be real but
  • 12:07 - 12:11
    what it's supposed to do is it
  • 12:09 - 12:14
    represents a custom property
  • 12:11 - 12:17
    registration directly in your socket
  • 12:14 - 12:18
    without having to run any guess so
  • 12:17 - 12:21
    that's pretty cool that's pretty
  • 12:18 - 12:22
    interesting so this is kind of more it
  • 12:21 - 12:26
    is very later to like the Houdini and
  • 12:22 - 12:28
    the custom properties segment of CSS so
  • 12:26 - 12:30
    those are this is something that is
  • 12:28 - 12:32
    interesting to you this is something to
  • 12:30 - 12:35
    look out for it really looks quite
  • 12:32 - 12:36
    interesting CSS box model is a spec in
  • 12:35 - 12:39
    and of itself
  • 12:36 - 12:42
    so basically was split out from CSS to
  • 12:39 - 12:46
    point to I want to where it was a false
  • 12:42 - 12:48
    way and I think the chapter 9 on the
  • 12:46 - 12:51
    feature section it was for sports model
  • 12:48 - 12:55
    which he talks about the margin padding
  • 12:51 - 12:57
    I think borders is more in here but they
  • 12:55 - 13:00
    are just splitting it out and defining
  • 12:57 - 13:03
    it in its own spec and and they are meet
  • 13:00 - 13:05
    at level 3 and split some stuff out to
  • 13:03 - 13:09
    level 4 but essentially this is respect
  • 13:05 - 13:11
    that focuses just on the box model I
  • 13:09 - 13:13
    think this is better because they're
  • 13:11 - 13:15
    going to more in depth about how it
  • 13:13 - 13:16
    works as well more diagrams which you
  • 13:15 - 13:19
    know one was so confusing I don't know
  • 13:16 - 13:20
    if you ready ice there any like for some
  • 13:19 - 13:22
    other presentations I have to do
  • 13:20 - 13:25
    you don't understand this is English
  • 13:22 - 13:26
    it's not but this one is so you can give
  • 13:25 - 13:29
    it a try
  • 13:26 - 13:31
    CSS text module about three what in
  • 13:29 - 13:35
    graph was also it update that text
  • 13:31 - 13:37
    module is nice so basically this is the
  • 13:35 - 13:38
    module that covers the bit that does
  • 13:37 - 13:41
    your line breaking justifications
  • 13:38 - 13:44
    alignment your whitespace handling and
  • 13:41 - 13:46
    stuff text transformation and here is
  • 13:44 - 13:48
    also where there's a bit of
  • 13:46 - 13:50
    internationalization aspects to it
  • 13:48 - 13:52
    because there's there's certain
  • 13:50 - 13:54
    properties for example hiding
  • 13:52 - 13:57
    punctuation this property at least quite
  • 13:54 - 14:00
    specific to typesetting for Han
  • 13:57 - 14:03
    characters is Agent X so I also quite
  • 14:00 - 14:06
    quite fond of this module a rubies is
  • 14:03 - 14:12
    tangentially related to East Asian text
  • 14:06 - 14:16
    because Ruby is annotation on top of
  • 14:12 - 14:19
    life it is not language specific but
  • 14:16 - 14:23
    it's most commonly seen for East Asian
  • 14:19 - 14:27
    text so it's kind of like to indicate to
  • 14:23 - 14:30
    you how to read each character so you
  • 14:27 - 14:33
    can do this on the web there's a ruby
  • 14:30 - 14:35
    element and corresponding CSS for you to
  • 14:33 - 14:39
    spell it and I think they are making it
  • 14:35 - 14:43
    more granular in terms of how you wanna
  • 14:39 - 14:45
    lay out like the spacing between the the
  • 14:43 - 14:50
    ruby characters and the main characters
  • 14:45 - 14:52
    whether whether you want them aligned to
  • 14:50 - 14:55
    the site or how it's going to be you
  • 14:52 - 15:00
    know spaced out so this is what the CSS
  • 14:55 - 15:03
    Ruby module covers and the corresponding
  • 15:00 - 15:06
    HTML element is a ruby element so if
  • 15:03 - 15:10
    that's something that you work with
  • 15:06 - 15:12
    probably you'd like to you know look
  • 15:10 - 15:13
    into this a lot of interesting means is
  • 15:12 - 15:16
    like way more links that I normally put
  • 15:13 - 15:19
    in CSS findings from the new Facebook
  • 15:16 - 15:20
    design is really interesting because I I
  • 15:19 - 15:24
    think most people got like the new
  • 15:20 - 15:29
    roller right is my last man so this
  • 15:24 - 15:31
    gentleman he's like a CSS working CSS
  • 15:29 - 15:34
    encyclopedia he he goes into very
  • 15:31 - 15:35
    in-depth into CSS for this
  • 15:34 - 15:38
    but he also does these like case studies
  • 15:35 - 15:39
    so I mean like following him on other
  • 15:38 - 15:42
    things really really interesting
  • 15:39 - 15:44
    articles that look was really suspect
  • 15:42 - 15:45
    overflow so they talked about how they
  • 15:44 - 15:48
    influence that it I thought this was
  • 15:45 - 15:51
    really nice so there's the functions
  • 15:48 - 15:53
    that we talked about and this is CSS the
  • 15:51 - 15:56
    control text selection just in case you
  • 15:53 - 16:04
    didn't know but I want to have a look or
  • 15:56 - 16:05
    pens section because this lady said I
  • 16:04 - 16:10
    can't pronounce her last name so I'm
  • 16:05 - 16:12
    just gonna try Sarah for sign these are
  • 16:10 - 16:13
    like he's a professional interest come
  • 16:12 - 16:17
    on
  • 16:13 - 16:21
    as you can see the CSS column empty this
  • 16:17 - 16:23
    is not an image my friends its CSS so
  • 16:21 - 16:26
    like since everyone's playing anymore
  • 16:23 - 16:32
    crossing I guess you know the sick it's
  • 16:26 - 16:38
    a very a piece of art on this these look
  • 16:32 - 16:39
    quite cute yeah you can own and also on
  • 16:38 - 16:44
    a highlighter kit because you know it's
  • 16:39 - 16:49
    okay so yeah any made that small X so
  • 16:44 - 16:52
    like that's nice again ice cream is for
  • 16:49 - 16:55
    for I love people and in their creative
  • 16:52 - 16:57
    with I also have a favorite HTTP status
  • 16:55 - 16:59
    code we can talk about this like next
  • 16:57 - 17:07
    year's April Fool's Day this is very
  • 16:59 - 17:09
    very nice and is spring is over
  • 17:07 - 17:13
    Sampo is very horn I'm very unhappy but
  • 17:09 - 17:16
    so let's just look at a can typing so
  • 17:13 - 17:18
    anyway that's it for news updates I've
  • 17:16 - 17:24
    dragged this on long enough so I'm gonna
  • 17:18 - 17:24
    hang over to Chris stop share
  • 17:24 - 17:27
    [Music]
Title:
Latest CSS News - Talk.CSS #50
Description:

more » « less
Duration:
17:28

English subtitles

Revisions