0:00:00.410,0:00:08.280 yeah okay um hello everybody in the zoom 0:00:05.339,0:00:09.900 we got zoom bombed just now so I guess 0:00:08.280,0:00:12.360 it was a good thing that we are we have 0:00:09.900,0:00:16.980 our own junk channel sorry to whoever's 0:00:12.360,0:00:21.199 on YouTube so anyway welcome to the 50th 0:00:16.980,0:00:23.189 edition of top CSS we unfortunately 0:00:21.199,0:00:25.859 cobia see a thing 0:00:23.189,0:00:28.800 in singapore for the benefit of our 0:00:25.859,0:00:32.899 audience some of whom I know you not 0:00:28.800,0:00:37.230 reasonable we have our own phone for 0:00:32.899,0:00:41.000 shelter in place most air home or MC or 0:00:37.230,0:00:44.129 depending Macaulay circuit breaker or CB 0:00:41.000,0:00:46.620 it is a appropriately Singaporean 0:00:44.129,0:00:48.690 synonym I assume that only the locals 0:00:46.620,0:00:51.090 will get the job that's Nivea day so 0:00:48.690,0:00:53.610 because the situation is like that we 0:00:51.090,0:00:56.100 asked you online we are even more online 0:00:53.610,0:00:59.460 than before because we used to be like 0:00:56.100,0:01:03.300 ok speakers just harder in one Hecker 0:00:59.460,0:01:05.430 space and everybody else be at home now 0:01:03.300,0:01:06.960 everybody is at home so amazing so 0:01:05.430,0:01:09.299 anyway we have we have a Twitter 0:01:06.960,0:01:11.820 presence Singapore CSS we have a hashtag 0:01:09.299,0:01:17.880 foxy SS you see if you're lucky tone is 0:01:11.820,0:01:23.119 a bit of a rocky um necks so you can 0:01:17.880,0:01:27.420 find us these links nobody uses them so 0:01:23.119,0:01:29.340 so I have a coupon that we do not 0:01:27.420,0:01:30.320 tolerate harassment of participants of 0:01:29.340,0:01:33.060 any kind 0:01:30.320,0:01:36.360 we got zoom bomb so clearly we you do 0:01:33.060,0:01:38.909 better but in general I think the rest 0:01:36.360,0:01:42.020 of you have led some people so yes a 0:01:38.909,0:01:45.259 conscious behave yourself or your baqia 0:01:42.020,0:01:49.890 showed us two engineers but as we who 0:01:45.259,0:01:53.579 will contain the post produced cuts of 0:01:49.890,0:01:55.020 all the tongs foodie and envy you must 0:01:53.579,0:01:59.399 also as always 0:01:55.020,0:02:02.729 sada Cheon who is a keen on Singapore he 0:01:59.399,0:02:05.880 is not around in this particular me that 0:02:02.729,0:02:09.390 this particular time but know that we 0:02:05.880,0:02:11.730 will always give him a mention because 0:02:09.390,0:02:14.030 he printed the first scoffs because they 0:02:11.730,0:02:18.450 say most yeses ever heck 0:02:14.030,0:02:22.800 we also have friends we cannot well 0:02:18.450,0:02:27.950 offshore our system it that Singapore 0:02:22.800,0:02:32.240 yes we still going on I think 0:02:27.950,0:02:34.500 occasionally in if there is every month 0:02:32.240,0:02:38.220 there are middle of the man we are sorry 0:02:34.500,0:02:41.910 man our best friend me back in school we 0:02:38.220,0:02:44.250 are knowledgeable we have a link we have 0:02:41.910,0:02:46.500 assigned monitors an event hosted a man 0:02:44.250,0:02:49.080 in the webs it has not changed for the 0:02:46.500,0:02:51.690 past four months color the man by 0:02:49.080,0:02:54.240 anybody not everybody might my favorite 0:02:51.690,0:02:56.400 segment is a colored man so in case you 0:02:54.240,0:02:59.130 don't know there are a hundred and forty 0:02:56.400,0:03:01.830 eight named CSS colors which is enough 0:02:59.130,0:03:05.460 for twelve years plus per class worth of 0:03:01.830,0:03:07.770 meetups we are at about year for so 0:03:05.460,0:03:11.340 don't worry loss or constable colonel 0:03:07.770,0:03:14.100 man is blue it's rather longer names but 0:03:11.340,0:03:16.740 remember when you are using a CSS color 0:03:14.100,0:03:20.370 no spaces no dashes no underscores it 0:03:16.740,0:03:22.710 just one single long word you can read 0:03:20.370,0:03:25.530 it however you want you can say Khan 0:03:22.710,0:03:27.990 flow blue but like I think it's 0:03:25.530,0:03:30.030 compatible so if you don't like expose 0:03:27.990,0:03:32.100 you don't like RGB air quotes you can 0:03:30.030,0:03:35.130 use this English word beautiful English 0:03:32.100,0:03:37.680 word contra very come from coneflower 0:03:35.130,0:03:40.080 bro is a shade of a medium to light blue 0:03:37.680,0:03:42.810 containing relatively little green 0:03:40.080,0:03:45.180 competitive through this hue was one of 0:03:42.810,0:03:48.030 the favorites of a famous Dutch painter 0:03:45.180,0:03:50.760 johannes vermeer i think i put on his 0:03:48.030,0:03:52.560 name but never mind the most valuable of 0:03:50.760,0:03:54.360 blue sapphires are also called 0:03:52.560,0:03:57.600 cornflower blue this is a very valuable 0:03:54.360,0:04:00.780 color here named CSS colors actually 0:03:57.600,0:04:02.490 were food from the x11 colors so this 0:04:00.780,0:04:06.450 control blue was further 0:04:02.490,0:04:08.100 initial set of 68 that was committed to 0:04:06.450,0:04:12.870 the x11 0:04:08.100,0:04:15.810 repo on the 19th of august 1985 just 0:04:12.870,0:04:20.790 useless trivia that you probably never 0:04:15.810,0:04:25.740 need to know so the agenda for today is 0:04:20.790,0:04:29.100 if the ever CSS news of a month and 0:04:25.740,0:04:31.350 very long oh my god I always want that 0:04:29.100,0:04:33.930 is it is it because everybody is stuck 0:04:31.350,0:04:35.970 in woman they like oh yeah let's just 0:04:33.930,0:04:37.890 push in Jersey and write more spectrum I 0:04:35.970,0:04:40.260 did everything I don't know really long 0:04:37.890,0:04:42.600 and then a lot of people wrote because I 0:04:40.260,0:04:45.270 hope people make coat pants so I'll just 0:04:42.600,0:04:47.940 highlight a few of the more interesting 0:04:45.270,0:04:53.220 ones yeah and then we have watch new 0:04:47.940,0:04:55.170 HTML by our original co-founder 0:04:53.220,0:04:57.120 Christina Danny all the way from 0:04:55.170,0:04:59.790 Melbourne so nice like in the wrong time 0:04:57.120,0:05:05.330 zone but hi hi Chris thanks for coming 0:04:59.790,0:05:07.950 and we have a intervention by also 0:05:05.330,0:05:10.230 familiar locals because they'll who 0:05:07.950,0:05:12.420 probably is like bouncing his daughter 0:05:10.230,0:05:16.590 on his knee right now so I'm gonna move 0:05:12.420,0:05:25.890 on to the news let's see okay Gary of 0:05:16.590,0:05:33.210 these share profits cream sue me so I'm 0:05:25.890,0:05:39.600 really okay HTML and CSS news for a 0:05:33.210,0:05:41.250 month of me so 35 Firefox 35 was 0:05:39.600,0:05:45.600 released me 0:05:41.250,0:05:46.919 so a bunch of bug fixes lots of blah 0:05:45.600,0:05:49.290 blah blah the only thing I wanna talk 0:05:46.919,0:05:52.430 about is mean function meant next 0:05:49.290,0:05:54.810 function and claim functions so these 0:05:52.430,0:05:56.280 mathematical okay no any mathematical 0:05:54.810,0:06:00.510 but like CSS functions have been 0:05:56.280,0:06:02.070 implemented in 75 so it allows for range 0:06:00.510,0:06:04.919 of values which is really cool because 0:06:02.070,0:06:07.980 we never used to be able to avenge the 0:06:04.919,0:06:09.750 first inkling of a range of to actually 0:06:07.980,0:06:12.840 do you have this grid you could use a 0:06:09.750,0:06:15.450 min max function is in the context of 0:06:12.840,0:06:17.460 greet and now that these like a more 0:06:15.450,0:06:20.340 generalized functions and come out you 0:06:17.460,0:06:23.880 can use min Max and clap so what mean 0:06:20.340,0:06:25.590 does is that you accepts one or more so 0:06:23.880,0:06:31.050 you can put in a bunch of values you 0:06:25.590,0:06:34.770 will and already it's it won't return 0:06:31.050,0:06:38.850 you on your use and it's called a 0:06:34.770,0:06:42.030 maximum a lot value based on my way 0:06:38.850,0:06:44.100 you want it to be Max is converse so 0:06:42.030,0:06:48.470 it's like a minimum a lot value and then 0:06:44.100,0:06:52.740 Clem is like the there's a maximum in so 0:06:48.470,0:06:55.080 so this is something in 75 so it's like 0:06:52.740,0:06:57.270 stable so like everyone can go and try 0:06:55.080,0:06:58.830 you don't have to go and tweet your 0:06:57.270,0:07:00.150 settings to do it there is something 0:06:58.830,0:07:03.690 that I want to talk about the thirst 0:07:00.150,0:07:08.310 require that little so there's also a 0:07:03.690,0:07:09.900 runner posts from hex not Mozilla where 0:07:08.310,0:07:11.430 they talk about all the features in in 0:07:09.900,0:07:14.310 75 so that's quite good 0:07:11.430,0:07:16.730 let me refresh these because I pushed a 0:07:14.310,0:07:20.520 change five seconds ago 0:07:16.730,0:07:23.250 Safari technology preview so it's the 0:07:20.520,0:07:24.990 Safari bow-window popper logo and I 0:07:23.250,0:07:27.000 think they do release us every two weeks 0:07:24.990,0:07:29.070 so it's it's quite nice cause they this 0:07:27.000,0:07:30.870 is literally I think the the letter sync 0:07:29.070,0:07:33.600 with us of features that you can find 0:07:30.870,0:07:36.090 our browser before I do shit on Safari 0:07:33.600,0:07:42.320 but suffice technology preview is 0:07:36.090,0:07:45.330 actually pretty good if you want to see 0:07:42.320,0:07:47.580 implementations on the very new staff so 0:07:45.330,0:07:51.150 for example there they they put in 0:07:47.580,0:07:58.550 selectors lever for support for these 0:07:51.150,0:08:01.950 units LH which is line high and I think 0:07:58.550,0:08:11.340 so LD h is equal to compute the value of 0:08:01.950,0:08:13.800 line hi Wow good eh RH is I believe line 0:08:11.340,0:08:17.640 height of the root element as opposed to 0:08:13.800,0:08:20.460 the current element there's a samurai 0:08:17.640,0:08:27.510 Atika on CSS tricks so it's also in in 0:08:20.460,0:08:31.410 the links West Was see okay CSS colorful 0:08:27.510,0:08:34.969 Gilad is a bug fixes so no longer to 0:08:31.410,0:08:34.969 worry this is fun 0:08:35.960,0:08:44.430 okay the entire process like when you 0:08:38.490,0:08:49.980 own I love this bar Oh issue report 0:08:44.430,0:08:53.310 because we've the river of river there 0:08:49.980,0:08:55.950 is a CSS value known as Reaper 0:08:53.310,0:08:57.540 I think when chromium first released it 0:08:55.950,0:08:59.190 as an issue so they like me but 0:08:57.540,0:09:02.670 everybody before me but in your back 0:08:59.190,0:09:04.640 again so if I just like this paper I'm 0:09:02.670,0:09:08.250 like come on guys 0:09:04.640,0:09:09.060 amazing the get property is finally in 0:09:08.250,0:09:11.279 Chrome Canary 0:09:09.060,0:09:13.440 I mean Firefox had it for so long and I 0:09:11.279,0:09:16.050 just get in so many places and I'm 0:09:13.440,0:09:18.600 always at the right for back for for for 0:09:16.050,0:09:20.250 Chrome and now okay okay is in canary so 0:09:18.600,0:09:23.070 hopefully eventually you'll be like 0:09:20.250,0:09:26.430 standardized which would be nice and 0:09:23.070,0:09:29.790 also my not so secret not very secret 0:09:26.430,0:09:31.890 secret agenda is to solve like have 0:09:29.790,0:09:35.010 convinced chrome people that they need 0:09:31.890,0:09:38.430 better great tooling because if you use 0:09:35.010,0:09:40.860 the if you are you using chrome to do to 0:09:38.430,0:09:46.830 greet there's no numbers and and stuff 0:09:40.860,0:09:49.670 like that oh no numbers I mean you it is 0:09:46.830,0:09:52.770 slightly similar to the what you call 0:09:49.670,0:09:57.020 Firefox implementation this is a good 0:09:52.770,0:10:00.540 sign my friends so yeah yes browser News 0:09:57.020,0:10:02.910 News is surprisingly long cuz they have 0:10:00.540,0:10:07.100 been months where I had no spec updates 0:10:02.910,0:10:10.800 but this month we have a long list so 0:10:07.100,0:10:12.510 speech CSS speech mode you can read it 0:10:10.800,0:10:14.220 recommendation actually corvini so I 0:10:12.510,0:10:16.050 don't think a lot of people are we're 0:10:14.220,0:10:17.910 familiar with CSS P because I it should 0:10:16.050,0:10:20.700 be thought I mean the proportion of 0:10:17.910,0:10:25.170 people who are very familiar with screen 0:10:20.700,0:10:27.450 media readers I also not that many I 0:10:25.170,0:10:29.160 realized there is around because he 0:10:27.450,0:10:31.560 actually got into a lot of the 0:10:29.160,0:10:33.420 accessibility stuff so if you have any 0:10:31.560,0:10:36.380 questions I believe we can answer them 0:10:33.420,0:10:38.700 I'm just putting this out there so the 0:10:36.380,0:10:44.690 the speech mode you basically just 0:10:38.700,0:10:51.300 defines oral CSS properties so so I 0:10:44.690,0:10:53.870 guess you can saw lifestyle the way the 0:10:51.300,0:10:56.640 the screen is gonna go meet the text so 0:10:53.870,0:10:59.720 that's that's pretty interesting color 0:10:56.640,0:11:04.290 just one module one very very new spec 0:10:59.720,0:11:06.570 so what it does is for user user 0:11:04.290,0:11:11.070 preferred color preferences 0:11:06.570,0:11:15.000 so you'd have things like color scheme 0:11:11.070,0:11:17.940 property so like that whether this post 0:11:15.000,0:11:19.940 color adjusts so it almost put in for 0:11:17.940,0:11:23.400 light you can force a more accessible 0:11:19.940,0:11:26.880 color scheme I believe so it's very very 0:11:23.400,0:11:29.130 new and like initial working drugs and 0:11:26.880,0:11:31.770 things but then these this is a either 0:11:29.130,0:11:34.560 pretty cool I always love the color in 0:11:31.770,0:11:36.150 later modules so maybe I'm biased media 0:11:34.560,0:11:37.920 queries level five 0:11:36.150,0:11:39.060 I'm glad data I talked about is a past 0:11:37.920,0:11:41.730 couple months cause they've been doing 0:11:39.060,0:11:44.820 ampere work on it so I think they just 0:11:41.730,0:11:50.400 pushed a new update properties and 0:11:44.820,0:11:52.590 values API level one so I wanna this is 0:11:50.400,0:11:55.920 not new like no ambience but I just 0:11:52.590,0:11:59.070 wanted to point it because CSS tricks 0:11:55.920,0:12:01.740 also release and I think on the property 0:11:59.070,0:12:04.230 value I also it was quite new to me 0:12:01.740,0:12:07.190 because it's so draft is so drunk that 0:12:04.230,0:12:09.480 right you might not even be real but 0:12:07.190,0:12:11.450 what it's supposed to do is it 0:12:09.480,0:12:14.030 represents a custom property 0:12:11.450,0:12:16.740 registration directly in your socket 0:12:14.030,0:12:18.240 without having to run any guess so 0:12:16.740,0:12:20.550 that's pretty cool that's pretty 0:12:18.240,0:12:22.470 interesting so this is kind of more it 0:12:20.550,0:12:26.370 is very later to like the Houdini and 0:12:22.470,0:12:27.840 the custom properties segment of CSS so 0:12:26.370,0:12:30.090 those are this is something that is 0:12:27.840,0:12:31.530 interesting to you this is something to 0:12:30.090,0:12:34.770 look out for it really looks quite 0:12:31.530,0:12:35.640 interesting CSS box model is a spec in 0:12:34.770,0:12:38.910 and of itself 0:12:35.640,0:12:41.580 so basically was split out from CSS to 0:12:38.910,0:12:46.110 point to I want to where it was a false 0:12:41.580,0:12:48.390 way and I think the chapter 9 on the 0:12:46.110,0:12:50.670 feature section it was for sports model 0:12:48.390,0:12:55.290 which he talks about the margin padding 0:12:50.670,0:12:56.910 I think borders is more in here but they 0:12:55.290,0:13:00.270 are just splitting it out and defining 0:12:56.910,0:13:02.520 it in its own spec and and they are meet 0:13:00.270,0:13:04.890 at level 3 and split some stuff out to 0:13:02.520,0:13:08.760 level 4 but essentially this is respect 0:13:04.890,0:13:10.740 that focuses just on the box model I 0:13:08.760,0:13:12.660 think this is better because they're 0:13:10.740,0:13:14.610 going to more in depth about how it 0:13:12.660,0:13:16.470 works as well more diagrams which you 0:13:14.610,0:13:18.900 know one was so confusing I don't know 0:13:16.470,0:13:20.339 if you ready ice there any like for some 0:13:18.900,0:13:22.230 other presentations I have to do 0:13:20.339,0:13:24.749 you don't understand this is English 0:13:22.230,0:13:25.559 it's not but this one is so you can give 0:13:24.749,0:13:28.860 it a try 0:13:25.559,0:13:31.050 CSS text module about three what in 0:13:28.860,0:13:34.620 graph was also it update that text 0:13:31.050,0:13:36.569 module is nice so basically this is the 0:13:34.620,0:13:38.459 module that covers the bit that does 0:13:36.569,0:13:41.129 your line breaking justifications 0:13:38.459,0:13:43.589 alignment your whitespace handling and 0:13:41.129,0:13:46.220 stuff text transformation and here is 0:13:43.589,0:13:48.449 also where there's a bit of 0:13:46.220,0:13:49.999 internationalization aspects to it 0:13:48.449,0:13:52.019 because there's there's certain 0:13:49.999,0:13:54.480 properties for example hiding 0:13:52.019,0:13:57.149 punctuation this property at least quite 0:13:54.480,0:14:00.029 specific to typesetting for Han 0:13:57.149,0:14:02.550 characters is Agent X so I also quite 0:14:00.029,0:14:05.699 quite fond of this module a rubies is 0:14:02.550,0:14:11.509 tangentially related to East Asian text 0:14:05.699,0:14:16.499 because Ruby is annotation on top of 0:14:11.509,0:14:19.110 life it is not language specific but 0:14:16.499,0:14:22.589 it's most commonly seen for East Asian 0:14:19.110,0:14:26.670 text so it's kind of like to indicate to 0:14:22.589,0:14:30.089 you how to read each character so you 0:14:26.670,0:14:33.089 can do this on the web there's a ruby 0:14:30.089,0:14:35.399 element and corresponding CSS for you to 0:14:33.089,0:14:39.050 spell it and I think they are making it 0:14:35.399,0:14:42.959 more granular in terms of how you wanna 0:14:39.050,0:14:45.199 lay out like the spacing between the the 0:14:42.959,0:14:49.649 ruby characters and the main characters 0:14:45.199,0:14:51.720 whether whether you want them aligned to 0:14:49.649,0:14:55.410 the site or how it's going to be you 0:14:51.720,0:14:59.870 know spaced out so this is what the CSS 0:14:55.410,0:15:03.269 Ruby module covers and the corresponding 0:14:59.870,0:15:05.959 HTML element is a ruby element so if 0:15:03.269,0:15:09.629 that's something that you work with 0:15:05.959,0:15:11.550 probably you'd like to you know look 0:15:09.629,0:15:12.929 into this a lot of interesting means is 0:15:11.550,0:15:15.870 like way more links that I normally put 0:15:12.929,0:15:18.809 in CSS findings from the new Facebook 0:15:15.870,0:15:20.490 design is really interesting because I I 0:15:18.809,0:15:23.999 think most people got like the new 0:15:20.490,0:15:28.709 roller right is my last man so this 0:15:23.999,0:15:31.220 gentleman he's like a CSS working CSS 0:15:28.709,0:15:34.200 encyclopedia he he goes into very 0:15:31.220,0:15:35.430 in-depth into CSS for this 0:15:34.200,0:15:37.620 but he also does these like case studies 0:15:35.430,0:15:39.300 so I mean like following him on other 0:15:37.620,0:15:42.120 things really really interesting 0:15:39.300,0:15:43.649 articles that look was really suspect 0:15:42.120,0:15:45.180 overflow so they talked about how they 0:15:43.649,0:15:48.029 influence that it I thought this was 0:15:45.180,0:15:51.480 really nice so there's the functions 0:15:48.029,0:15:53.250 that we talked about and this is CSS the 0:15:51.480,0:15:56.130 control text selection just in case you 0:15:53.250,0:16:03.690 didn't know but I want to have a look or 0:15:56.130,0:16:05.130 pens section because this lady said I 0:16:03.690,0:16:09.720 can't pronounce her last name so I'm 0:16:05.130,0:16:11.550 just gonna try Sarah for sign these are 0:16:09.720,0:16:12.769 like he's a professional interest come 0:16:11.550,0:16:17.490 on 0:16:12.769,0:16:21.329 as you can see the CSS column empty this 0:16:17.490,0:16:23.040 is not an image my friends its CSS so 0:16:21.329,0:16:26.010 like since everyone's playing anymore 0:16:23.040,0:16:32.370 crossing I guess you know the sick it's 0:16:26.010,0:16:37.649 a very a piece of art on this these look 0:16:32.370,0:16:39.209 quite cute yeah you can own and also on 0:16:37.649,0:16:43.890 a highlighter kit because you know it's 0:16:39.209,0:16:49.079 okay so yeah any made that small X so 0:16:43.890,0:16:51.630 like that's nice again ice cream is for 0:16:49.079,0:16:54.899 for I love people and in their creative 0:16:51.630,0:16:56.910 with I also have a favorite HTTP status 0:16:54.899,0:16:59.250 code we can talk about this like next 0:16:56.910,0:17:06.620 year's April Fool's Day this is very 0:16:59.250,0:17:09.299 very nice and is spring is over 0:17:06.620,0:17:13.140 Sampo is very horn I'm very unhappy but 0:17:09.299,0:17:16.230 so let's just look at a can typing so 0:17:13.140,0:17:18.299 anyway that's it for news updates I've 0:17:16.230,0:17:23.900 dragged this on long enough so I'm gonna 0:17:18.299,0:17:23.900 hang over to Chris stop share 0:17:24.240,0:17:27.299 [Music]