Mathias Bynens: 3.14 Things You Didn't Know About CSS (Updated) - CSSConf.Asia 2015

hi everyone so yeah today I'm gonna talk about a couple of CSS fun facts that I've collected over the years the kind of things that were interesting to me when I finally did understand them or took me a very long time to figure out and it is my hope that some of these things are new to you or at least that they are entertaining in some way and I'm sure that at the end of the talk you'll agree that CSS is much more powerful and even more beautiful than what we end up using it for in our day to day jobs so first let me just quickly introduce myself hi I'm Matthias I work for Opera Software in developer relations and before that I used to freelance as a web developer a front-end web developer so you could say I have been dealing with CSS for a lot of years now I like web standards in general programming web security and working on open source projects now if you have any questions at all during this talk like if you're watching the live stream or whatever or watching this video later just send me a message on twitter my handle is just my first name Mattias and I'll be sure to get back to you of course if you're here today just come talk to me afterwards and I'll be happy to answer any questions you have now let's get started let's start off with everyone's favorite CSS feature important yeah I'm sure you're all familiar with what important does right in a situation like this for example all the elements with class bar get the green color but all the elements with class bar within an element with class foo get a red color I'm sure I'm not telling you anything new here and that looks something like this so whenever there is a conflict between two selectors in CSS then by default the last one in the source code wins but in this case the specificity for both selectors is different the one with the highest specificity wins regardless of the order in the source code so here the specificity of the first selector with the two class selectors in it is actually higher than the specificity of the last one and that's why the color is red and not green again I'm sure this is nothing new to you now in some situations you may need to override an earlier rule set so in this case you want all elements with class bar to be green despite of that other is rule at the top there and it's cases like this where important can be useful you can just add importance to that last statement there and it boosts that single declaration precedents in CSS so if you do that then the color in fact will become green and again I'm sure this is nothing new to you you know how important works right well what one surprised me here is that important actually has nothing to do at all with specificity it's actually a completely different thing it boosts a single declarations precedence without affecting the specificity for the whole selector now you may have heard that to use of important is actually a bad practice so you're not actually supposed to be using it even though sometimes we all do now the good news is now that we know that there's a difference between specificity and the use of importance we can actually fake importance we can use important without using importance and instead of boosting the declarations precedence we can just increase the selector specificity so all we have to do is just repeat the class name in the last lecture a couple of hundred times and every time you do that you boost the selector specificity so if you just do that enough times automatically this selector will eventually win and just to show you that this actually works it does and in this case we only need to repeat the class name once if it's twice there if it's there twice it will be the strongest one the specificity will be highest and it will win so there you have it I know it's still early in the morning but already we've established our new best practice of the day yay not really okay so let's talk about farm family names and CSS now let's do a show of hands if you've heard this one before if there's whitespace in the font family name it must be quoted no no one is certain before okay I got this off the w3c CSS validator it used to give this message to anywhere when you had some CSS like this one font family come comic sans ms and you forgot the quotes around it it would give you the warning hey you should you're supposed to be quoting this so for a very long time I was afraid of having white space in font family names without using quotes around it but a couple of years later I actually found out that this doesn't really make a lot of sense at all spaces are not problematic and found family names usually if the font family name is a space separated set of CSS identifiers there's no problem at all so if you want to use Comic Sans a mess you don't actually need the codes the CSS will still be valid and it will still work exactly the same way in all browsers now there's a lot of exact rules and description and exceptions here if you want you can check out the URL in the middle of this slide for all the details but trust me when I say that in this case we can simply omit the quotes and everything will still work exactly the same way in fact there are other things that are much more dangerous than whitespace in film family names here's an example let's say we have a Fonz named 4 5 6 . street now because this film family name starts with a digit it's no longer of valid CSS identifiers so this rule won't actually silently be ignored it's not valid CSS now the way to fix that is to make it a valid identifier and we can do that by escaping that first digit there and that will look something like this now we get backslash 3 4 5 6 . street and that's kind of weird right because the font family name is 4 5 6 birria street but now it says 3 4 5 6 and there's a space and there's a backslash and it's all just a little bit crazy and this is probably not code that you want to be writing or maintaining now how else can we resolve this problem well of course you guessed it we can just use quotes around the font family name so whenever you're in doubt I would say just always use the quotes it avoids a lot of problems and it's you know it that way you don't have to think about all these issues that might pop up but the thing I learned here is that there is no need to use the quotes just because of whitespace that's just not true now I really wanted to understand how all this works and so I ended up making a small tool for it so you can enter any font family name in there and it will tell you if it can be used without the quotes in CSS or not now let's take a closer look at attribute values in HTML and CSS as you probably know in both HTML CSS we can use quotes around tribute failures I'm sure that's not big news for you so here we have an anchor element with an HR f of foo and then in the CSS style block we select that same element based on its attribute value and then we give it a nice hot pink background now in some cases like in this example we can actually omit these quotes and everything still works fine the HTML is still valid the CSS is still valid and the result looks the same in every browser there's no problems whatsoever however it's important to note that the rules for unquoted attribute values actually differ between HTML and CSS in this example the HTML is valid the attribute value is through pipe bar but the CSS actually is invalid in this case and it won't work it will actually silently be ignored and there will no be no beautiful hot pink in this example at all so how do we resolve this again you guessed it all you have to do is just use the quotes and in this case it's only really necessary to use quotes for the CSS version but in general the same advice holds it's probably best to just always wrap your attribute values in quotes both in HTML and in CSS because it's that way you just don't have to think about all these potential issues and about the difference between HTML and CSS rules I really wanted to understand this as well so and all these real differences between HTML and CSS so I ended up making another tool and you can enter any value it will instantly tell you if it can be used as an uncrowded attribute value in HTML and in CSS and as you can see in some cases the result is actually different between these two languages okay another thing I learned something new about is CSS comment as you probably know this is the only common syntax that CSS sports it starts with a slash followed by an asterisk and then it ends with an asterisk followed by another slash and anything in between those two things will become part of a comment even if it's like a newline character so it becomes it can become a multi-line comments that way now that's why this example works the way you expect it to the color colon rats rule it won't up be affected it will silently big nor because it's part of a commons now lots of other programming language have another comment line syntax as well this is the single line comments index and it uses just two slashes and everything else on the same line will be ignored in that case however CSS doesn't support this syntax it doesn't have the concept of single line comments so this is actually invalid CSS however what surprised me about this is that this specific example would actually work the way we'd expect it to the line with color : rat will not have any effect so what's going on there well it turns out that property names in CSS are supposed to be valid CSS identifiers and identifiers cannot contain unescape slashes and because of that this one rule fails to parse and CSS just skips it moves on to the next one and then applies that now it would be different if the property name that we're using was a valid identifier because then the CSS would be parsed just fine however CSS grammar also states that rules for unknown properties are silently ignored so this gives us another way to fake a single line comment in CSS we could just use the British spelling or we could just make some typos in the property name and that's kind of crazy and you should never deliberately do this probably but it kind of works in the sense that the rule is silently ignored now tap Atkins has an excellent blog post that explains these tricks and it's a good way to learn a little bit about CSS grammar and about how CSS error handling works so check it out there's something else that's related to CSS that I would like to show you but before I can do that we need to talk about HTML tags for a little while now does anyone know the difference between HTML tags and elements let's do a quick show of hands okay not a lot of people are confident in the difference so I'll just briefly explain it tags are the things that you type into your code editor when you're editing an HTML page so for example if you have a paragraph element on your page you can have a star tag to open the paragraph element and an end tag to close that P elements those are tags but as soon as your document is part by the browser it becomes a Dom a document object model it becomes this tree based thing that you interact with in JavaScript or in CSS and once that happens we no longer think in terms of start and end tags we think in terms of elements so that's pretty much difference as soon as the page is open in the browser its elements and melt tags that we're thinking about and that's important to realize because if you're dealing with CSS or JavaScript you're always interacting with these elements not with tags or star tags or end tags so anyway here's an example this is a very simple HTML document so you see the HTML and the head and the body tags there well it turns out that they're closing tags their end tags are optional you can just omit them and the result is a compact but still valid HTML document that results in exactly the same Dom as the one before but it gets even better it turns out that you can also omit their start tags for these elements and that way you end up with this very minimal but still valid HTML document that still results in exactly the same Dom so that's really important here the HTML the hat and the body elements will still be there in the Dom even though they're Clark techs are omitted from the source code and that's because these elements are special they're kind of implied and the browser will automatically insert them into the document for you even if they're not part of the source code so with that in mind this is probably the most useless - to ever I mean if you're going to get an HTML - at least you should pick some tags that aren't implies right now anyway that minimal HTML document that I just showed you got me thinking how far can we really take this and what more can we remove from our HTML source code if we stop caring about what's valid and what isn't and then I came across Martin Cole's experiment called no JavaScript so he attempted to recreate a game using CSS only and his goal was to use no JavaScript at all and as little as HTML as little HTML as possible and in fact this is the full HTML source code for his project it's just one line that includes a stylesheet on to the page and really you should check this out for yourself the URL is right there but just to give you a quick idea of what it looks like well here it is so remember this is all CSS and I'm not sure if you can see this but the spaceship at the bottom is actually following my mouse cursor which sounds simple if you have the other script axis but if you want to do this using only CSS it's actually very tricky now the elements that are being styled here are the ones that we've talked about before the ones that the browser automatically creates for you even if they're not part of the source code so HTML hat and body and then there's also that one link element that he had there in the source code so of course the link and the hat elements are invisible by default but you can just apply this play block to them to make them visible then you can start styling them giving them a background image and all that stuff so anyway we have HTML hat link and body that's four different elements then we can also use the before and after pseudo elements on these elements and that totals up to twelve unique style blocks so what you're looking at here is just twelve unique style blocks and that's enough to create this apparently it's kind of crazy and it just really blew my mind still demo so I created a demo of my own it's not nearly as impressive as this one but I still want to talk about it this is what it looks like yeah I know right it's not nearly as impressive to look at that as the previous one but it looks fairly simple and if I were to see this on a random website I would probably think it was just some basic HTML like a paragraph element or something and with some very basic CSS to style it but in fact if you look at the source code for this page you'll see that it's completely empty so what is going on here well this is the trick that I used I'm using the link HTTP header here so in theory this header can be used instead of the link element in HTML anything you can do with the link element in HTML can also be done with the link HTTP header in browsers that support it and at the moment only Firefox supported supports it's Oprah I used to support it before we switch to blank but ever since we brought support so if you want to try this out visit this page in Firefox so anyway this gives us a completely empty HTML documents as you can see the content length is zero so I'm not cheating there I'm not using any special weird tricks it's really an empty HTML document but we still get a CSS file applied to it so the next step is to make the document look like it contains some actual text and for this I used two CSS content property so I select the body element which the browser automatically creates for me even though I don't have the tag for it in the source code then I target the after pseudo element and then I just give that some contents and that's how I made the texture up there so that is how this demo without any HTML source code at all works now is this really useful well I don't know maybe you can prank your colleagues with this knowledge a little bit or if you're really evil you could use it as part of an interview question imagine this so you give an interview candidate URL and tell them to open it in Firefox and this URL points to an HTML document that contains some inline SVG for example the SVG that displays a circle as you can see here now the circles fill attribute is set to red and that's when you ask the interview candidate why is the circle green instead of red and it will probably take them very long time to realize that there's a hidden CSS file that magically gets applied to these documents even though you can't see it in the source code I mean the Styles are not even visible if you inspect the elements in the dev tools so yeah good luck with that I hope none of that ever happens to you in an interview ok if you want to talk about Unicode in CSS we need to talk about Unicode in HTML too so let's start there the first thing you should know is that the class attribute accepts every possible character every possible unicode character is valid in a class attribute value and it will also work in every browser so for example 404 - ever is a valid class name which is probably not very surprising to you but you could also use the copyright sign as a class name for an element containing a legal disclaimer for example now in html5 in the standard there is this new feature that says that the same thing now finally goes for the ID attributes so this is new and aspect with browser as I've always supported this this means that IDs can contain any symbol at all except for whitespace but everything else is valid as part of an ID attribute so you could use the heart symbol as the ID for a paragraph for example or you could use curly quotes as a class name for block code elements you can do all kinds of stuff you can even use hidden emoji to passive-aggressively tell people you are using a shitty browser and all of this is valid HTML this also means that we can do stuff like this where you give an element an ID of hash ID or let's say a class of adult class or you can even combine it to an ad colon hover braces at the end or even use a value that resembles an attribute selector you see where this is going right all these classes and ID's already look like they're a CSS selector so how would you write as use a selector to select these elements based on these IDs and classes well the answer is we need to escape these values first so that they become valid identifier and only then we can use them as part of a CSS selector and this is what that will look like the hash symbol for example has special meaning in CSS so it cannot be used as it is we must escape it as backslash hash first and the same thing goes for the dot character has special meaning so that becomes backslash dot the colon character leads escaping too and theoretically you could escape that as backslash colon but that doesn't work in old versions of Internet Explorer so a more compatible way to escape it is to use backslash 3 a followed by a space and 3 a is the unicode code point that refers to this character so you could use this type of escape for any Unicode symbol if you want to anyway as you can see many characters need escaping but take a look at that last example the element with ID 404 - error because that ID starts with a digit it needs to be escaped as well and I remember that this really surprised me at some point because I was trying to figure out why it was impossible to style such an element using CSS well it turned out I just had to escape it and that looks like backslash three for space oh four dash error which is kind of weird if you think about it so if you'd ever need to style an element whose class or ID starts with a digit I'm sure you will think back on this moment because it took me a long time to figure this out now as for the other examples with the non ASCII Unicode symbols well those can just be used without escaping them at all because they don't have any special meaning in CSS now you could still escape them if you wanted to based on the Unicode code point value and that will look like this now to help me understand all this I built another one of those tools so it allows you to enter any ID or class name even the crazy ones and then it will automatically tell you how to select that element in CSS or using the selectors API in JavaScript so if you're using documental career selector or jQuery or something like that it will tell you what the selector would look like after the double escaping that you need for that nowadays there's a standardized utility method for this in the form of a JavaScript API called CSS escape and this is part of the CSS object model specification it's already two supported in Opera Chrome and Firefox so you can actually already start using this today if you need support for older browsers as well there's a polyfill available that you can use now the thing is you probably need this functionality much more often than you would think and here's some examples of that I'm sure many of you have just some I've done something like this at some point I know I have so you read the hash from the URL and then you use it to select an element in JavaScript this is fairly common if you use a taps widget on your page for example so look at this code and imagine what happens if the location hash contains a space for example now the entire meaning of the selector that we dynamically generate would suddenly change because instead of selecting an element based on that ID it would now become a descendant selector now here's another example very dynamically construct a CSS selector what if some value in this case contains double quotes the CSS selector would actually be broken because the attribute selector would be closed by the double quote this might throw a javascript error and otherwise break your site so this code is actually broken but it's not really obvious to see that now how can we avoid these problems well all we need to do is just wrap the variable parts of these selectors in a call to CSS dot escape and that magically makes it work and protects against these cases now that we're on the subject of breaking things using malformed CSS selectors let's take a look at how CSS can be used for evil now first we need to talk about cross-site scripting or XSS has anyone ever heard of that before okay yeah some people some evil hackers in the room even if you have heard of cross-site scripting I would recommend checking out Google's cross-site scripting game it's a really great way to learn about how these cross-site scripting attacks work and how you can exploit them yourself and actually if you give this a try you would be surprised how simple it is to perform these attacks yourself now most websites nowadays contain display or they display use of supplied contents in different contexts within an HTML document so here a custom user color is inserted in the context of a CSS value then the user name is inserted in an HTML text context as part of a paragraph element the user profile URL is injected in a quoted HTML attribute value the user ID is inserted in a JavaScript context on the right hand side of a variable declaration and finally some server generated debug information is inserted as part of a comments in HTML so all of these things are variable content which can somehow be controlled or at least influenced by the user and the website that displays this information in the HTML code needs to make sure that the user input is properly sanitized and escaped for the context that it gets inserted to and that is the main problem each of these five different contexts requires its own different escaping rules so usually web application hackers look for cross-site scripting vulnerabilities which enable them to execute custom JavaScript code in the context of the targeted website once they found such a vulnerability they can basically do anything they want in JavaScript to that website so the hacker could add a script that listens for keyboard events for example and then logs whatever you like it locks your keystrokes that the victim enters to their own server for example it would essentially be a key logger or it could just read sensitive information from the Dom and then leaked it to the attacker server so that they basically steal that data now that's using JavaScript but this is a CSS conference so let's shift our perspective here what can we do if we have full control over pages CSS but nothing else what's the worst thing we can do as an evil hacker in that case in other words what if all these injections that we talked about are all sanitized properly except for the first one this one so for the sake of the example assume that there is some sort of sanitation going on there that makes it impossible to close this tile element in the HTML but everything else is allowed to you can inject any CSS you want but you cannot inject arbitrary HTML what damage can you do with that well does anyone remember the CSS Zen garden yeah some people if you look this up you'll end up at this website it's just a very simple HTML document and it can be styled using CSS and anything is anyone is free to contribute a CSS file with a custom design and if it looks good it will be added to the site so here's a bunch of different designs designs there's over 200 on this website already and they all look beautiful and completely different and the main thing here is that the only thing that is really changing between these designs is the CSS the HTML is exactly the same for every page that you see here so this is a very powerful demonstration of what CSS can do now if you look at this from the perspective of an evil hacker imagine having that kind of power over a website that you're targeting the obvious thing to do as an evil hacker is of course to completely deface the website you can make it look like at whatever you want basically so here's the original CSS comp website for example now if you had full control over the CSS but nothing else you could make it look like this and I'm not sure they would sell any tickets this way because it's a CSS conference and you have you know some certain expectations about their use of CSS so when an attacker is able to control the CSS of your page in such a way that's probably or not what you want it could be even worse I mean they could just hide all the existing content and then just apply a background image that contains some text of their own for example so they could basically replace all the existing content of the site with whatever they want there's something else that you could do and this is kind of similar to defacing but it's much more subtle you wouldn't touch the design but you would just inject some really annoying CSS rules and there's a project that collects CSS rules like that it's called evil dot CSS and it's just a CSS file basically with a bunch of really annoying CSS rules it also contains some rules that are just super bad for performance just for the fun of it and yeah again here's the original CSS deaf West web site and here's that same web site with evil dot CSS enables so there's no extra scroll bars everywhere the layout is slightly broken some of the content is flickering or missing the text is slightly blurry I'm not sure how easy to see that is yeah there's a lot of content just missing suddenly scrolling also feels really really slow because of all those terrible performance-wise CSS that is added to the page and my favorite part is the first letter in each element is slightly smaller than all the other ones so annoying anyway so both defacing and doing this sort of thing to web sites can be annoying for both the administrators and the visitors of the web site but it could be much worse right because if we look back at cross-site scripting well you could steal sensitive information that way and this is not possible using just TSS right or is it well let's see CSS kind of allows you to leak the value for any attribute value in the Dom so some attribute values contain security sensitive information like a CSRF token for example now if you were an attacker or a hacker you wanted to steal this value attribute here using nothing but CSS injection how would you go about it well one way to do it is to write a bunch of CSS like this you could use the CSS attribute starts with selector and that way it's trivial to figure out the first character of the CSRF token just by brute forcing it you just try every possible value for that first character and you include a unique background image URL on your own server for each character and when the browser makes the request to your server you know that that character matches and then you can start doing the same thing for the first two characters to guess the second character and so on until you have brute force the entire token so in the worst case scenario you could just enumerate all the possible values for the CSRF token but in practice you don't really need to test all of them it's a bit faster than that and here's an actual proof of concept for this sort of attack it doesn't use any JavaScript at all so only a lot of CSS rules and it's not very efficient or fast but it shows that it is possible to actually exfiltrate the sensitive data this way by using nothing but CSS now that was about stealing information that was hidden in an HTML attribute what if you want to steal data from the Dom that is part of a text node using nothing but CSS so let's say we have some HTML like this that contains let's say a username or something else that we want to find out or maybe it's the balance of your bank accounts something like that but you can't use JavaScript you can only use CSS injection how can we do this well you could use Unicode range to define web fonts to be used only for specific character so if you create a separate Fontes declaration for each individual character with a unique URL for each font you can essentially figure out which characters are being used as part of the CSS content and here's a proof of concept of that the demo was made by a guy named masato Kanagawa and as you can see the browser makes a request for each of the characters that is being used as part of this sensitive content now one downside is that it wouldn't show you the repeated characters like for example the letter a is being used three times in this case and of course the browser will only make one request for the font that is used for the letter A but in many cases like it really depends on the use case of course but in many cases just knowing which characters are being used is enough to guess the rest now still it could be worse there could be an easy way to steal sensitive data that is fast it's efficient that doesn't require us to write a lots of CSS and it turns out there is such a thing as well and CSS ie5 introduced this proprietary feature called CSS expressions to make it possibly to dynamically calculate the values for certain CSS properties and this feature was supported up until I 7 now even if you've never seen this before if you just look at the syntax closely you'll note that the code wrapped in the expression part is actually JavaScript so yes these as expressions are basically a way to run JavaScript in your CSS it's a great idea I'm not sure what could possibly go wrong here anyway because it's all just JavaScript it means you can use browser specific JavaScript methods as well like alert for example this example would show an alert message and that looks something like this but it also means you can use Dom related methods like window that open so you can actually open a new window with the URL of our choice using nothing but CSS and that of course could be the URL for a malicious web site like a phishing website that pretends to be the original website and then asks you for your password soon as you enter it of course the attacker has stolen your password now you may be thinking okay this really sucks but if this only affects i7 and older versions of ie then what's the big deal no one really supports those browsers anymore and not a lot of people use IE 7 well that's true but the thing is Internet Explorer has this thing called browser modes and the last four major IE releases each shipped multiple rendering engines that emulated the bugs in their older IE versions their f12 developer tools allow you to easily switch between them now that's all good but it's also possible to trigger a specific rendering mode for your website by using an HTTP header or an HTML meta elements the meta tag on this slide ensures that your document is rendered in the latest available rendering mode so this means that if someone using ie 11 visits your site it will render it using the OEE 11 rendering mode which as a developer is probably what you want and I tend to use ie 10 mode in IE 9 to use ie 9 mode that makes sense however this meta tag would trigger i7 mode even in ie8 or I 9 or I 10 and the thing is this mode not only emulates the known bugs that i7 used to have but it also brings back the old deprecated or even removed features that i7 used to have such as CSS expressions so our initial example it only worked in i7 and older versions can be made to work even in IE 8 9 and 10 just by adding a meta tag it even works in AI 11 if the site is in the so called trust its own so that's why I did I include ie 11 in the title here because it's a little bit trickier so okay that's pretty cool but in our attack scenario from before we could only inject CSS and we couldn't inject HTML so we had no way to add the meta tag there so how can we still make use of this trick well it turns out that the attacker can just create a web page of their own hosted on their own server at the meta tag there and trigger ie7 compatibility mode and then they could embed the targeted website with their CSS payload inside of an iframe in that case the documents the document mode of the parent document is inherited by the targeted website in the iframe even if the targeted website would normally use the latest available rendering mode so this allows the attacker to use CSS expressions in the context of the target website even in ie10 so just to recap there's two conditions here if a target website allows you to inject arbitrary CSS and it allows framing then this enables attackers to perform cross-site scripting attacks on your site and Internet Explorer using nothing but CSS I thought that was kind of crazy now what can you do about this how can we avoid these CSS expression vulnerabilities as a web web site administrator well of course all of this can be avoided if you just sanitize all your intrusted input before injecting it into your HTML responses all you have to do is never make a single mistake and everything will be fine sure like that's ever going to happen so failing that you could use the X frame options HTTP header to prohibit framing of your web page and this makes it impossible for an attacker to easily pick your page into i7 compatibility mode and thereby enable CSS expressions and last but not least and this is another thing that really surprised me you could use the so-called html5 doctype you know the short one and it turns out that Internet Explorer uses this doctype as a heuristic whenever a page is rendered using this doctype it will automatically disable CSS expressions even if your page gets framed and inherits the i7 document mode CSS expressions won't work with this doctype and this is not true for any other dog type so if you have a lot of old HTML pages on your server lying around that you don't even maintain anymore it's definitely a good idea to just do a simple search replace on them and just update their doctype to use this one it won't break anything and will actually make your site more secure in Internet Explorer so to me this is really kind of crazy to think about because you need to add an HTTP header and use a specific duck type in your HTML just to prevent people from running JavaScript in your CSS well it's a bit too much for me really but that's the Internet Explorer I guess now it's not just ie there's other browsers that used to have books with JavaScript and CSS you can kind of execute JavaScript using nothing but CSS in other browsers like old versions of Firefox used to have a bug if you assign a background image to an element and point it to a JavaScript URL the script would be executed however it would be executed in a sandbox so it was not possible to actually steal any data from the Dom or do anything really malicious but what you could do is for example trigger an infinite loop and that would essentially hang Firefox so if someone was able to inject this CSS into your page someone would try to visit the site in Firefox they would basically just get this yeah well it would look like this and then if we just crash now fire from Mozilla has since fixed the bug so this is not a problem anymore but it really makes you think about how powerful CSS is okay and because I know it's still early and I've just been talking about a lot of random different things let's do a quick CSS quiz who is up for that yeah oh yeah that's the spirit okay so what band is this I hope you like music you can just shout if you want to guess could be yeah that's the one the Black Keys yeah these guys okay next one what band is this you can just shout your guesses it's fine to guess what color is that foo fight oh that would be good no it's not that it's actually simply rat yeah it's just ref that was a terrible one okay let's try another one what band is this this requires some knowledge of the Unicode standard yeah its Radiohead okay one more what band is this I think someone said it already yeah the white stripes alright okay now let's try a song the famous pop song what song is this yep painted black by the Rolling Stones like if you have a red door and CSS you want to paint it black you can use CSS blend modes for that turns out okay what band is this yep Green Day wow that was quick respect okay let's try some more editor's yeah that one might have been a little bit too geeky okay one last one before I go what band is this yep it's the Black Eyed Peas there they are okay so with that I'd like to thank you for your attention and thanks to everyone whose research I've been using you

Channel: JSConf

Views: 5,386

Keywords: Cascading Style Sheets (Programming Language), Web Development (Interest)

Id: KPL-mA77bDo

Length: 41min 51sec (2511 seconds)

Published: Thu Dec 17 2015