 Sebenarnya, saya melihat spesifikasi CSS. Saya berada di sana selama-lamanya. Jadi, mari kita berkongsi. Sebenarnya, saya membantu di website ini disebabkan Kodrops. Jadi, mereka mempunyai referensi CSS yang tidak ingin saya jelaskan oleh semua kodrops CSS. Jadi, kemudian, entry yang saya perlu lakukan adalah grid. Jadi, grid. Okey, saya hanya akan belajar tentang grid dan saya akan menarik tentang itu. Jadi, saya belajar tentang itu sepuluh bulan lalu. Jadi, saya sedar saya dapat tahu yang grid terdapat besar. Jadi, untuk membuat perjalanan ini, saya akan memperkenalkan perjalanan di spesifikasi CSS. Yang terkenalkan di spesifikasi CSS adalah menerimanya sepanjang bahasa Inggeris. Sangat bagus. Mereka adalah contoh untuk menggunakan kes. Kemudian, saya akan mempunyai sebuah tepung. Sebenarnya, saya tidak akan mempunyai hal ini. Mari kita lihat. Ini adalah grid layout model. Ia adalah 86 pages, saya akan memperkenalkan ini. FYI. Jadi, okey, ia bagus. Ia mempunyai gram dan perkara. Tapi kemudian, ia akan memperkenalkan sebuah sepuluh bulan lalu. Jadi, anda lihat, ini adalah bagaimana... Mereka akan mempunyai di blu. Pemahaman dan kemahaman. Pemahaman dari kemahaman. Ia adalah sebuah format standard. Jadi, anda lihat, okey, kemahaman grid dan kemahaman. Pemahaman ini mungkin mempunyai tiga kemahaman. Ia mungkin mempunyai tiga kemahaman. Ia mungkin mempunyai tiga kemahaman. Kemudian anda lihat apa yang mempunyai tiga kemahaman. Dan ia seperti di mana. Jadi, ia menjadi seperti ini. Kemudian anda melihat semua sebuah sepuluh bulan lalu. Saya akan memperkenalkan. Saya tidak dapat memperkenalkan. Jadi, anda akan mempunyai tiga kemahaman. Mereka mempunyai tiga kemahaman. Ada semua kemahaman yang menarik. Bagaimana sepuluh bulan ini? Saya memperkenalkan ini untuk bahagian yang lebih baik dari dua hari. Sebelum saya sebenarnya mempunyai. Kerana untuk memperkenalkan grid, grid adalah salah satu pilihan yang lebih teruk. Sebab itulah... Ini adalah cara yang hanya dapat diperkenalkan dalam pilihan tiga kemahaman. Saya pasti jika anda mempunyai data dan visualisasi, anda akan memperkenalkan. Saya akan memperkenalkan dan memperkenalkan. Dan anda akan memperkenalkan dan mengatakan apa yang saya katakan. Tapi maaf, ini tiga kemahaman. Saya rasa ini adalah yang terbaik. Jadi, saya... memutuskan bahawa saya perlu belajar bagaimana untuk membaca pilihan ini. Jadi, kemahaman itu adalah perkara. Ia adalah perkara. Ia dipanggil Barker Snore Form. Ya. Jadi, apa yang ialah Barker Snore Form? Saya akan memperkenalkannya. Jadi, tentu-tentu ia telah memperkenalkan dua orang saya ialah John Barker dan Peter Norr. Dan... selalu mempunyai kemahaman untuk diri anda. Jadi, apa yang ialah? Sebenarnya, ia adalah metode kontekstri untuk menarik pilihan pilihan pilihan pilihan pilihan. Jadi, ia hanya... memperkenalkan kemahaman untuk menarik pilihan pilihan. Ia sangat berlaku. Jadi, kemahaman CSS yang berlaku adalah menggantikan dengan kemahaman BNF. BNF, apabila... ia sangat berbual dengan... ia berbual dengan seluruh bahagian untuk menarik pilihan. Saya bukan pilihan pilihan pilihan. Jadi, seseorang boleh... memperkenalkan kemahaman ini. Tapi, apabila ini benar. Mereka... ia memakai kemahaman untuk membuat kemahaman. Okey. Okey. Memakai kemahaman untuk membuat kemahaman. Sebenarnya, ia memakai kemahaman. Jadi, ia memakai kemahaman ini. Ini adalah kemahaman seluruh bahagian. Ini bermakna... kemahaman yang berlaku untuk dibuat dengan kemahaman yang berlaku. Itu yang saya faham. Jadi, saya mendapat kemahaman ini... dari... tahun ini. Selepas 16 tahun, saya mendapat kemahaman kemahaman. Bagaimana menarik kemahaman CSS. Tapi, saya fikir ini adalah kemahaman yang sangat baik. Jadi, ia menarik... bagaimana kemahaman yang dibuat dalam bahasa Inggeris. Jadi, kemahaman ini sangat lama... menarik kemahaman. Ia dapat dibuat dalam bahasa Inggeris... seperti itu. Jadi, setiap bahagian ini mempunyai maklumat. Jadi, ia seperti... apakah ia mempunyai... apakah ia mempunyai... berlaku berlaku berlaku berlaku. Jadi, setiap bahagian ini mempunyai maklumat. Jadi, saya hanya ingin... berbicara tentang semua ini. Jadi, semoga pada akhir ini, apabila anda cuba menarik kemahaman CSS, anda tidak akan terlalu terlalu terlalu terkenal apabila saya memulai. Jadi, itu adalah artikel 16 tahun yang lalu. Ia telah digunakan 16 tahun yang lalu, tapi masih berlembang dengan hari ini. Jadi, ada 4 kumpulan bahagian yang anda menemukan. 4 bahagian CSS. Jadi, ini bukan bahagian BNF yang terlembang dengan bahagian CSS sendiri. Jadi, pertama adalah bahagian kemahaman. Saya rasa yang terbaik anda akan sangat mengenali. Jadi, ia adalah... apa-apa pun, anda boleh menggunakan dengan kemahaman anda. Jadi, mengambil bahagian seperti auto, bahagian seperti tidak. Orang CSS, untuk menunjukkan bahagian kemahaman ini. Jadi, pada bahagian CSS, ia akan menjadi SES. Jadi, ia tidak akan ada pangkiran kemahaman. Bagaimana anda boleh menggunakan seperti itu. Satu lagi bahagian adalah bahagian kemahaman CSS. Jadi, bahagian ini akan diperlukan oleh bahagian kemahaman. Jadi, apabila anda menerima bahagian, ia mungkin menjadi... mungkin dengan bahagian kemahaman, ia akan menjadi bahagian kemahaman kemahaman. Jadi, ia bermaksud bahagian yang digunakan dengan bahagian kemahaman. Jadi, ini juga sangat lewat. Kemudian ada bahagian lain yang dipanggil bahagian kemahaman. Di mana... Kerana bahagian ini biasanya untuk bahagian kemahaman. Jadi, mereka cuba mencari... mereka tidak mahu mempunyai... apa-apa yang mereka beritahu sebelumnya. Jadi, bagi contoh... Mari kita bincang. Tidak, tidak. Okey, ini. Kita gunakan yang ini. Bahagian kemahaman kemahaman ini adalah... adalah kemahaman kemahaman. Tetapi, ada bahagian kemahaman yang dipanggil... bahagian kemahaman kemahaman... yang menggunakan... jadi, ia adalah kombinasi bahagian kemahaman kemahaman kemahaman kemahaman. Jadi, mereka adalah terpaksa... ada kemahaman kemahaman kemahaman kemahaman. Untuk beritahukan kemahaman, anda menganggap kemahaman kemahaman kemahaman tersebar. Kemudian ada data kemahaman tidak-mahaman bahan. Jadi, perkara yang terdapat... dengan bahagian yang saya cakapkan sebelumnya... adalah tak sebenarnya... peralatan CSS yang anda menutmati di kemahaman kemahaman anda. tetapi, ia dipanggil di mana-mana dengan dokument kemahaman kelokongan. Jadi, jika anda... dua beberapa skala yang ditutupi daripada speks... Lain namanya akan menyebabkan. Mereka bukan keadaan CSS, tetapi mereka membuat laluan lain dari keadaan sebenar. Jadi ia seperti sebuah referensi kerana laluan terlalu lama. Jadi mereka hanya membuat keadaan keadaan tersebut. Jadi keadaan keadaan ini adalah laluan namanya. Jadi kita mahu melihat keadaan keadaan keadaan tersebut. Semua ini adalah keadaan keadaan. Jadi ia adalah keadaan keadaan keadaan keadaan tersebut. Bagaimana keadaan keadaan tersebut? Laluan dan keadaan keadaan tersebut. Laluan dan keadaan tersebut? Laluan dan keadaan tersebut? Ya, daripada keadaan keadaan keadaan tersebut, tidak ada perbezaan. Tetapi sebenarnya ia tidak akan mempunyai jadi jika anda melihat keadaan CSS, saya akan pergi ke sini. Untuk keadaan sebenar, mereka akan mempunyai keadaan keadaan keadaan tersebut. Tapi jika ia kita pergi dengan keadaan keadaan tersebut. Jadi ia tidak akan mempunyai keadaan keadaan keadaan tersebut, keadaan keadaan tersebut, keadaan tersebut. Ia digunakan sebagai referensi untuk sesuatu yang lain. Kerana saya rasa pengalaman saya dengan keadaan keadaan tersebut adalah ada banyak keadaan tersebut untuk menunjukkan satu keadaan tersebut. Jadi mereka hanya memilih untuk memakai keadaan tersebut. Dan apabila mereka memakai keadaan tersebut, mereka akan membuat keadaan tersebut yang mereka lebih suka untuk membuat. Jadi ia lebih memakai keadaan tersebut. Tapi jika ia adalah kawasan yang dapat kita gunakan, mereka akan memberikan keadaan tersebut. Seperti yang saya terkenal, jauh. Apa? Itu juga yang terjadi. Mereka membuat keadaan tersebut. Mereka membuat keadaan tersebut. Kerana mereka hanya memiliki keadaan tersebut. Mereka akan membuat keadaan tersebut. Bagaimana jika mereka membuat keadaan tersebut? WPC berkaitan. Tak mengapa. Jadi kita ada komponen-valu kombinatur. Jadi kita boleh mula mengenai symbol. Jadi, yang pertama adalah yang yang sangat jauh. Jadi jika contoh seperti ini, depressed it smallest page or if it's a space separated list of values, if it figures value one value two, you have to use it, value one value two, you cannot sort it around. So that's pretty common. And then we have a double ampersand. So for double ampersand, all the values, if there's two values, both of them must be present, but you can sort them around. An example I can think of is for grid. the grid row property, dan kemudian ada kawasan span dan kemudian ada integer dan kemudian ada nama-nama dan nama-nama anda boleh menjual. Jadi, ia boleh menjadi span dua atau dua span, ia okey. Jadi, itu adalah pasangan yang tidak mempunyai. Seperti pasangan depan, pasangan tidak mempunyai juga. Jadi, anda boleh tidak mempunyai dan kemudian anda tidak mempunyai di mana-mana pun yang anda gunakan. Jadi, itu adalah pasangan dua dan apa yang ia disebabkan? Ini adalah pasangan. Jadi, jika adalah pasangan, hanya satu value. Jadi, jika value satu, dua, tiga. Jadi, pasangan adalah semua. Saya rasa yang paling kita tahu adalah pasangan semua. Pasangan dua adalah, sekurang-kurang-kurangnya satu, anda boleh mempunyai lebih banyak, ia tidak penting. Jadi, iya. Kemudian, itu adalah pasangan yang mempunyai. Jadi, ia seperti mempunyai value di setiap. Jadi, anda mempunyai apa-apa pasangan yang mempunyai dulu. Jadi, untuk contoh ini, adalah value satu atau value dua. Jadi, anda mempunyai satu dulu dan kemudian value tiga. Jadi, pasangan yang mempunyai hanya bermakna bahawa ia sebuah grup. Ia sebuah grup. Saya rasa ia bermakna sebuah grup. Oh, minta maaf. Ya, ya, ya. Maksud saya. Maksud saya. Maksud saya. Maksud saya. Baiklah. Kemudian kita mempunyai ini. Komponent value multipliers. Jadi, sekali lagi, ia seperti mempunyai tangan. Jadi, satu pertama adalah pasangan yang mempunyai. Pasangan yang mempunyai bermakna adalah pilihan. Jadi, anda juga boleh. Jangan mempunyai, tidak menginginkan juga. Sebenarnya, bagaimana ia mempunyai sebabnya ia akan memasukkan. Untuk beberapa pasangan yang mempunyai. Kerana ada dua cara yang anda boleh menggunakan. Dua pasangan yang anda gunakan. Ia adalah pasangan atau pasangan, betul? Jadi, jika ia mempunyai pasangan, pasangan sebenarnya mempunyai dalam proses peringkatan. Dan kemudian ada pasangan yang mempunyai. Jadi, ia membuat peralatan sentiasa sebabnya jika pasangan yang mempunyai adalah pilihan, ia bukan pasangan yang mempunyai. Jadi pasangan yang mempunyai adalah mengajar ke pasangan yang mempunyai. Jangan memperkenalkan. Pasangan yang mempunyai hanya bermaksudnya pasangan. Ya. Ya. Saya akan mempunyai. Ah, ya. Ya. Boleh. Boleh. Boleh jolok apa-apa saja. Ya. Pilihan dan peralatan adalah cara yang baik untuk mempunyai. Pada pertanyaan. Pada pertanyaan S. Jadi pertanyaan S lagi... Pada peralatan S ini, bukan 1, atau 1, itu bukan banyak. Tetapi lagi, peralatan ini adalah penting. Jadi, ya. Pada pertanyaan yang dipercaya, tapi bukan semua ini diperkaitan untuk membuat pembawaran penyakit tenang daripada penyakit pembawangan yang mempunyai? No, because if you want to reference the spec to actually know what you cannot or cannot use, a user would also refer to the spec. Of course... I'm thinking of a primary audience so if I was writing a compiler for this, that's perfect. Yes, you are absolutely right. The purpose of the spec is actually for browser implementers to standardise the way that the implement features. For the rest of us, because I know I'm focusing on a very specific aspect of the specification, but the rest of the specification I found exceptionally useful when I was trying to learn about GWT is they include a lot of use cases. I think one of the requirements when they actually come up with the specification is actually you are encouraged to have actual build example in use cases inside to illustrate what you're trying to achieve. That actually helps me as a normal web developer to understand how the property actually works. Since I'm there, I might as well see how the syntax is different and that's really confused. Let's confuse now. In theory, it's for compiler writers, but given the timeline, as it appears in May, most developers will try to read it anyway because it will not have a tutorial about it by tomorrow. Or if you really want to have, you may be bad about it. Mdm is a good thing. You take examples, let's say. Is there a shot to read it? The technology moves past and you are compiler writer. If you're applying it in that way. Even since that's great, Rachel Andrew has been so influential at least with tracking and directing some of the spec has a really extensive how to use the grid side. But if she thought this was enough, then she wouldn't be doing anything better. So one thing about the specification, I'm going to reveal for the attention here. The specification, yes. The audience is, I would think, four browser implementers. But normal developers, like you and I, we can contribute by actually going through the spec and raising issues because I would think that the people who are actually implementing the browsers probably are writing browser code. They're not writing web code. But what they need is input from people who would actually be using these properties in production to give feedback on whether, hey, does this make sense? If we implement it this way, is this how you guys would expect to use it? I want to highlight extremely relevant example. When grid comes up and we start using it, there will be a CSS property in there called grid gap which essentially allows you to set gutters between your grid items. This was not included in the spec for the longest time. But as Chris mentioned, Rachel Andrew is very involved with grid spec, even she's been involved with the grid spec longer than I have been a web developer. And she was the one who pushed to have this gutter property. So she, I think it was a meetup. She met up with one of the spec writers. She's aka fantasized. Her real name is Alika Etimad. I think I'm ruining it. So she raised this, she pushed it, and both her and Pat Epkins actually wrote it into the spec for the next iteration. So normal developers can make a difference to the spec and to how features are actually implemented in browsers. I think maybe a lot of people are not aware that this is possible. So I think it's necessary to make this more well known. This is how they are going to MIT. There you go. If you want to go to MIT, maybe contribute to the CSS stack. I don't know. Suggestion. Frequent public groups, it's actually an advice expert to the version groups and you can contribute more. They have a very good influence and that's a good strategy. So you don't only have to be a consumer. You can actually contribute your input to how browsers work, how the internet works. So it's like your little dent on the internet universe. The good thing is the barrier is your interest. And you can do it. There are no more specifications like 10 years. I understand everything is in you. It's quite interesting that most people get a spec and not a lot. Actually, I must say that they seem to be more and more readable with each year. I learned accessibility from the spec and the CSS version 1 and today's spec, they are larger but they are more readable. I'll quickly move on so we can get to more fun stuff. So another symbol that you'll encounter is the plus sign. Plus sign means one or many but they are space separator, not common separator. Then there will be curly braces. So these are for values My favourite property that I'm trying to explain to people who are completely new to CSS is the margin and padding property. Well, it can take 1 value. It can also take 2 values. It can take 3 and also 4 but they mean different things when you use that in a different combination. Then they just look at me as phone brick to them. So in the spec is written this way. There are several ways but if there are 2 values then it's a range so it's between X and Y. I like this because they just excuse for me to use the X and Y symbols. These are actual HTML entities that look like high school algebra. So in this example if it's like 1,3 then you can use 1,2, all 3. So it's a range. Let me think. I can't even think of a property on the top of my head that this applies to but rest assured that it exists. One more is hash. Hash is very similar to something that I mentioned previously except that now the separator is common in server space. Even I compare. Yes. We will get to that. So you can use that to bring a stack of components. Correct. So this is the last one. This one just indicates that one of the values is compos already so that's convolution mark. Looks like important. So convolution max what we've got to talk about is Vogshadow. So this is how it enormously looks like in the stack. It can be added none or a shadow. Vogshadow which actually means this. So if we have based on the knowledge that we have learnt from everything I said just now what this actually means is that all 3 values so instead length and colour must occur because of the double ever sense by any order. Inset is optional because of the convolution mark. At least 2 length values at most 4 because of the range and colour value is optional. Plus don't forget that the original one has a hash so the entire set can occur multiple times Sorry? Defend on the browser for example or You need to normalize CSS So I think for most it may or may not be so So let's Vogshadow Next, background So in the stack, it looks like only 2 values but it actually means this Nice So actually what it means is short hands are usually very tricky so you encounter most of these symbols when you get to short hand properties. So grid is this massive short hand that we may explain in potentially going to happen CSS grid workshop somewhere So when we use the background Actually I read this from a guy called Harry Roberts he actually mentioned that try not to use short hands because what happens when you use a short hand is that based on how the stack is written for most short hands when you use a short hand and you don't explicitly specify every single one those that you did not specify can reset to their initial value So for example if I had set background color somewhere above and then I use the background property actually will reset if I didn't explicitly sort of redefine it again unless you're really sure that's what you want use the individual properties So that was his recommendation I think that's quite true because when I do grid I also don't use a short hand It's a really smart implementation but you may or may not miss because I'm quite familiar with it now I will still miss out that one of these I did not set explicitly got reset to its initial value and I didn't really notice so that's just a suggestion so basically you have image, position repeat, style, attachment order doesn't matter whether you have them or not it's also up to you so as Thomas said the Singaporean term for this is called chinsai so at least one value must occur the rest can otot otot stands for own time, own target so if you are Singaporean and you have gone to the army this is a phrase commonly used in the army to say on your own time otot so any one value, the rest can otot I used to be talking about hierarchy Prophet was here recently talking about JavaScript stuff one of the things that he preaches is clarity in the JavaScript low shortcuts in JavaScript that doesn't exist in other languages he's point is basically you don't use them because it's so much easier to read what's going on so if you use background shortcut if you just say background color you can see right away what's going on even if you're a lowkey person looking at the code it just makes it all clearer so it might be R-rated explicit better to be clear than be clever change your variable so in this case for position, you can the background size is optional because of the question mark and then the entire set for the background layer can occur multiple times comma separated but only the final background layer can have background color so that's what you infer for all this symbology so the last property is oh the grid template color and rows again if you see it looks like so i'm not going to do this because i'm just throwing you can talk about this so there was this old fashioned way of presenting dnf diagrams as charts just to make it easier for you so data visualization i will look back so because i got sidetracked while trying to write my grid article made a teaching and when i was here i decided to explore something called print styles so technically i am how do i preview but actually oh okay let's try no okay if you really wonder to you can you can just do print again auto print open pdf is that no i don't think that's all okay so it's a kind of semi-optimized for print review really feel that you want it on your wall all the other stuff is gone and just the values are there you can turn off a lot of those things still you got the URL i think you can get rid of all of that i cannot control it so from css the margin is your printer option no i don't see oh okay but last time it's easier at 5.2 good to know i will investigate that and remove the margins it only says in only 3000s you can control that stuff okay whenever you order the red margin you get this printout stuff and remove them because it's 5.2 i see good to know so how do i go back i'm lost which term said there you go if anybody is interested qr code because i like qr codes and i'm chinese i think qr codes are a chinese thing so that's me so all the relevant thing articles and references if you ever decide to start reading css facts all very useful articles that's it move okay i'm back with the smashing magazine one that came out last year okay moving on we have zeo who is going to talk to us it's great when your host is also the speaker