 Boleh saya bincang sekarang? Okey, saya fikir ada lag. Ya, jadi saya juga tidak dapat melihat anda. Semua yang saya lihat adalah seperti ini. Dalam keadaan yang panjang, sebabkan dia berada di tempat kamera. Dalam bahasa Singlish yang lebih normal, adalah kerana saya berada di seluruh perjalanan selama dua minggu dan tiada siapa untuk bercakap dengan Singlish. Jadi saya akan meminta maaf jika ia bercakap dengan Singlish dan anda tidak faham. Oh, betul. Begitulah. Helo, orang yang cantik. Helo, terima kasih kerana datang untuk bercakap dengan CSS. Sebenarnya, lebih banyak anda menunjukkan bahawa kita tidak berada di sana. Saya menghubungkan perjalanan yang lebih baik. Mungkin lain kali saya tidak patut menunjukkan. Saya juga boleh. Saya dapat. Saya baru berada di tempat kamera ini. Helo, semua orang. Ini adalah berita HMN dan CSS. Untuk 20-20-19. Ia adalah kualiti Q4. Saya rasa ia adalah kualiti Q3. Kemudian, kualiti Q4, semua orang berada di bawah-dowah. Sebabnya di Desember, orang di Angmar tidak berjaya. Jadi, tidak banyak yang berlaku di landa browser. Tetapi DevTools 78 memiliki sesuatu yang baru. Sebenarnya, terutamanya javascript API dan rendering performa. Yang paling menarik saya boleh fikir adalah, anda boleh sekarang mencari issues DevTools dari main menu. Sebenarnya, sebab anda berada di bawah-dowah, anda akan berada di bawah-dowah dengan banyak orang browser ini. Ternyata, Chrome sekarang membuat lebih banyak investasi dalam DevTools. Mesti sebab FireFox memiliki sesuatu yang baru. Sekarang, mereka juga akan mencari. Jadi, ia bagus. Mereka semua boleh memiliki sebuah bawah-dowah yang lain. Kemudian, kita dapat lebih baik DevTools. Yang lain yang menarik browser ini adalah, FireFox sekarang bergerak hingga 4 minggu. Sebenarnya, saya tidak tahu, jika anda memiliki sebuah bawah-dowah yang lain, saya memiliki sebuah bawah-dowah yang lain. Sebenarnya, jika saya memiliki sebuah bawah-dowah yang lain, mereka tidak bergerak dari Q1 2020 yang akan bergerak hingga 4 minggu. Jadi, ia bermaksud bahawa, saya bukannya tentang FireFox, yang bermakna yang panam. Sרikatnya juga tidak terlalu banyak. Jika anda banyak menguruskan dia, anda percaya update sebab sebuah bawah-dowah yang lain. 1 minggu atau noong-noong-noong-noong. Sama-sama, tidak ada yang lain. Tapi, ada perkara yang menarik yang terlalu menarik. Saya melihatnya. Bukan perkara yang berperperatikan. sofasah kecil seperti itu. Jadi, anda statements di dalam lawat, ia terhadap frekmen tax. Tapi, ia perkara yang menarik. Saya rasa ini adalah idea yang cukup menarik. Jadi, ia membuat anda menjelaskan taksimpi dalam URL. Tapi daripada itu, jika anda pergi ke pemeriksaan ini, yang terkenal di pihak WICG, sebenarnya ada banyak perkara yang menarik. Anda tahu, tidak ada apa-apa yang anda lakukan dalam hidup anda. Anda dapat melihat. Saya dapat melihat banyak perkara yang menarik atau menarik. Sekarang, ia tidak ada web USB. Sebenarnya, ia cukup menarik. Jadi, jika anda ada yang menarik untuk melihat hidup anda, anda dapat melihat. Kerana tidak ada banyak perkara yang menarik, saya dapat menghidupkan perkara yang lebih menarik. Anda lihat perkara ini ada banyak perkara yang menarik. Di dalam bahagian yang menarik, mereka akan bercakap dengan saya. Memangnya, ia lebih susah. 2 penerbangan berjalan menjadi penerbangan yang lebih baik. Yang pertama, ia sangat menarik. Bercakap tentang data, bahagian yang menarik dan bahagian di CSS. Jika anda tidak tahu, jika anda tidak tahu, CSS okel boleh mempunyai bahagian di CSS, itu sebabnya anda perlu melihat perkara ini. Sebenarnya, anda dapat membuat peraturan atau boleh menjadi penerbangan yang lebih menarik. Pada pagi, anda dapat melihat bahagian dan tidak ada perkara yang menarik. Yang kedua, ia tidak sangat menarik. Jika Mac adalah perkara yang menarik, anda dapat melakukan peraturan yang menarik dengan CSS kerana sekarang ada peraturan CSS. Jadi, anda dapat melakukan penerbangan yang tidak menarik. Jadi, saya rasa ia sangat menarik untuk melihat perkara ini. Saya juga dapat melihat perkara yang menarik. Yang terakhir adalah 2 penerbangan yang berjalan menjadi penerbangan. Kerana penerbangan sebenarnya sangat menarik. Jika anda menggunakan masin Windows, anda akan melihat masin Mac, kemudian anda akan melihat telefon Android. Semua penerbangan yang menarik. Jika berpotensi, anda dapat melakukan sesuatu tentang penerbangan. CSS sedang mencari cara untuk membuat penerbangan yang menarik. Tapi saya rasa ada banyak perkara yang menarik. Bagaimana kita atau tidak? Saya rasa ia masih perkara yang menarik untuk melihat. Yang menarik adalah penerbangan yang menarik. Kerana ini adalah penerbangan Olivia. Sebenarnya, saya sedar dari sekarang, penerbangan Olivia akan melakukan sesuatu seperti penerbangan Twitter. Jadi, ini adalah penerbangan yang lebih menarik. Jadi, anda dapat melihat dan menarik. Anda dapat melihat perkara yang lebih menarik yang Olivia melakukan. Yang lain yang menarik adalah yang ini. Sudah tentu ia adalah penerbangan, jadi saya menarik. Tapi bagaimanapun, semuanya berada di Repository Github di bawah penerbangan. Atau jika anda mempunyai satu orang yang mempunyai 9 orang untuk mempunyai newsletter, anda juga dapat e-mel. Okey, itu saja untuk berita. Sangat cepat. Kerana anda semua tidak mahu mempunyai untuk bercakap. Sekarang saya perlu beritahu dan bercakap. Jadi, jika ini tidak berlaku dengan baik, saya akan bercakap dengan baik. Sebelumnya, anda sendiri akan bercakap. Saya dapat mengenai tanda-tanda saya. Tapi ia adalah sesuatu yang panjang untuk membesar penerbangan, bukan? Jadi, perkara itu, sebenarnya, perkara itu adalah mengenai kelebihan CSS. Sebenarnya, apabila kita mahu membuat kelebihan responsif, kita akan selalu menggunakan perasaan. Tapi perasaan adalah perasaan sesuatu, bukan? Jadi, biasanya, perasaan perasaan adalah perasaan perasaan jika anda menggunakan perasaan. Masalahnya, jika anda menggunakan perasaan, anda akan membangun dan membangun dengan segera. Jadi, jika anda mempunyai kelebihan dan e-mel, kerana kelebihan, tapi kelebihan mempunyai e-mel. Jika anda mempunyai satu set sebuah kota, hanya ada sebuah kelebihan yang mempunyai sebuah kelebihan, mungkin? Kerana jika kelebihan terlalu jauh, jika kelebihan terlalu kecil, kelebihan yang terlalu kecil, itu sebab semua perkara yang berubah pada perasaan yang sama. Tapi apa yang menarik tentang kelebihan yang berubah? Kerana kelebihan sekarang mempunyai sebuah kelebihan yang terkenal. Jadi, kelebihan ada FR. Saya akan jelaskan kelebihan ini. Tapi kelebihan ada FR, kelebihan Max, kelebihan yang berubah, kelebihan Fid, kelebihan Auto. Jadi, semua ini sangat menarik kerana jika anda membangun mereka bersama, mereka tidak membangun dan membangun pada masa yang sama. Mereka lebih berubah. Bukan sangat menarik mereka lebih berubah. Tunggu, tunggu. Ada kelebihan Kara. FYI, konsol boleh mencengar. Anda tahu, anda boleh mencengar konsol sampai ada kelebihan Kara. Jika anda berminat, mereka akan membuat kelebihan yang baik. Jadi, kita akan berbincang. Kita akan berbincang. Kita akan berbincang. FR sebenarnya berarti, tunggu, kita akan membuat ini lebih baik. Jadi, tidak, seperti itu. Jadi, satu FR, dua FR, FR itu apa yang bermakna, adalah kelebihan kelebihan yang digunakan dalam konsol. Jadi, dalam kelebihan kelebihan ini, FR-nya sangat menarik. Jadi, jika anda mencari saya rasa ia sangat kecil, tapi saya hanya mencari, kedua box ini 428, 214. Kerana ada dua FR, dan satu FR, dan satu FR. Untuk auto, segala-galanya, sama dengan jika anda perlu mengambil lebih banyak spesia, anda akan mengambil semuanya kelebihan kelebihan. Tetapi, auto sebenarnya berbincang dalam konten kelebihan, dan anda akan melihat ini ketika anda melihat kelebihan ketiga. Kerana ketika anda bergantung, ia sangat menarik. Jadi, FR-nya bahawa segala-galanya spesia dalam kelebihan, akan mengambil kelebihan kelebihan. Jika anda mempunyai spesia, anda akan mengambil kelebihan kelebihan. Saya akan kembali. Jadi, dalam kelebihan ini, ada banyak spesia, semua spesia akan mengambil kelebihan kelebihan. Tetapi ketika anda tidak mempunyai spesia, anda akan mengambil kelebihan kelebihan kelebihan. The interesting thing is that the brother will keep putting space away from the green column even until now, the auto still keep its max content size. Only until the green column string can not string anymore. Then only the auto start to string. Then eventually everybody will end up eventually everyone going to end up the same width. But what you notice is that if auto and FR, even just between these two, they grow and string at different widths already. So if you look between 3 and 4, the auto will never grow beyond the max content size. Then all the space will go to FR. But for number 3, FR all the space will take away from FR before the auto start to string. So I think that's quite interesting. What's even more interesting is the next set, which is fit content versus main content. So if you look at the legend here, green is still FR, blue is auto. So fit content, fit content is this sizing unit where it's a range between the minimum content size and either the maximum content size or whatever unit you put inside here. Actually, I got a better example. Hang on. Okay. So, you look at the Chinese box. So this column is main content. This column is max content. Then this column is fit content. So fit content, now it's fit content 300 here. The max content width for this one is about 482. So when there's not enough space, if you use fit content, so it's like same size as this one, then cannot fit anymore because minimum content. But because it's called fit content 300 or when you grow, you grow until here then it's stock. Because now it's stock at 300. So if we change this 300 to something bigger than the max content. So max content about 482. This column will not grow until 501. It will grow until max content then it's stock. So it's like it becomes a maximum content size. So that's how fit content work. So when we come back to here, grid also got a different type of sizing. Another range value which is min max. So min max is self-explanatory. First value is the minimum then second value is the maximum. So the syntax is that you put into values into the function. So 200 is my minimum size. Then 400 is the maximum size. It also adjusts depending on amount of space. So we look at example 5. We already say that if extra space will sure give to the green box. So this one we already expected. But when there not enough space the moment FR start to shrink shrink shrink keep shrinking which just is minimum size the blue box and the orange box will shrink at the same rate. Minimum content size at the same time. So like that maybe a bit boring. The example 6 a bit more exciting. And then it will involve a bit more browser resizing. So if we look at this example 6 got yellow box got blue box got orange box. So the yellow box in the min max then the orange box is the fit content. So when they got a lot of space all the space go to auto. So auto will grow. But when there is not enough space the content will be the size will be taken away from auto first. Stay away but then when it hit this size which is the maximum content size the auto doesn't shrink anymore. The min max will start to shrink. So at this point min max is at 400 400 When auto hit the max content then min max start to shrink now. But like shrink so ifan shrink until halfway the other 2 boxes start to shrink. So the exact point where this shrinking of all 3 boxes I don't know exactly when but it is a point which allows all 3 boxes to end up in their minimum size at the same time. So they will all hit their minimum size at the same time. So for the yellow box minimum size 200 for these 2, the blue and the orange the minimum size is the min content size. So if you see here it starts to shrink already everyone start to shrink at this point because this is the point where all 3 of them will shrink at the same rate and hit their minimum content size at the same time. And then when there is a lot of space so again when we grow the min max will grow and then it will kind of stop growing okay let's explain this in words if there is a lot of space you look at the orange box turn it off and on again I think maybe this doesn't make any sense to all of you because I cannot hear what you ask I cannot hear any response from you but anyway let me try to explain when there is a lot of space the feed content is oh lao wei, what like that? sorry again feed content will grow but then it will grow until 200 then it stop because that's the cap but after it hit the cap then auto and min max will continue to grow but once auto hit the max content size it's not going to grow anymore it's going to let the yellow box continue to grow and then hit 400 so the point of all this browser resizing is to show you that with this type of units your items will not go and shrink at the same rate and because of that you can do quite interesting things let me show more example other than color boxes so we are this one and then is what so this is 2 layout that look quite similar they look quite similar at a big view pod size but this first one is used percentage and this second one is used let's call it flexible sizing so at a white screen you can't really hear the difference but it's going to become very obvious when you get to a narrow screen size because you can start to see the percentage or the image already start to become very small and then the text start to squish up together so I think under normal circumstance around this width you have to put in media query to adjust the percentage the difference between this one and the bottom one if I hide this one this is the one with the variable sizing the variable sizing at a big screen is nice but as it goes down the image still manage to clip a decent size and your text will grow and you can stretch it out if I highlight a column it's slightly complicated because I put a lot of values inside but you don't really have to use media query you can just let so this particular layout I would say it's more solid across a wider range of view pod and because you're using grid it makes it easy to do overlap so if you look at the it's actually 9 so it's 3 row 3 column to let this title overlap is overlap the image you just have to you just have to say I want my title start at column 2 start at row 2 the text will just overlap the image the first one I had to use float then you'll see a very disgusting negative margin so it's a bit it's a bit not nice so if you use grid grid got a lot of advantages another good thing about this overlap is that if you are familiar or if you want to try out other things you can do these kind of funny things if you don't know what is blend mode you go to the CSS38 I think there's a 35 minute video of how blend mode works so if you never come the long story short is that because it's so easy to do overlap you can do kind of funny things so then a bit more creative that potentially if I'm viewing it on a very narrow screen then maybe like that but if you have a very wide screen then James McAvoy got different color I have an intro about James McAvoy when I go back home I'll tell you but what I mean to say is that new layout features because then you can do a lot of things that last time or last time it's like very hard to do but now it's actually quite easy and then you can zeng even more than before but now it's quite easy to zeng so basically that's it I think I restart the browser until just now already crash 2x so let's stop doing this and see you all next month I hope