CSSconf EU 2017 | Guil Hernandez: Get Ready for the Future of CSS!

[Music] thanks Jessica alright thanks so much everyone good afternoon thanks so much for having me here it's my first time in Berlin in Germany in general had a great time meeting a lot of you and just learning so much from some of the attendings here um I'm Gil Hernandez coming to you from South Florida and I work at treehouse I'm the front-end web development teacher and treehouse we have programming courses and printing web development courses online technology school I specifically teach courses about two FS JavaScript and most recently react you can find me on the Twitter's as a QH and most places on the Internet and I love CSS right that's why I'm here that's one of my favorite subjects to teach and talk about so today I'm going to be talking about some of the more fascinating and interesting things happening in CSS right now because CSS now provides some really amazing tools right that empower us more than ever before and gives us more flexibility over things like design and images effects design layout colors even managing and reusing values right so if you haven't started using or looking to new these features yet I'm going to cover just enough to get to using them and help you begin leveraging these features to empower your workflows and improve your projects and we're going to be looking at a little bit of code and lots of demos in the next 30 minutes or so but I am going to put this aside after the talk and for timing reasons I'm not going to go into too much about browser support but at the end we'll be a resources slide with some links to that so let's kick things up by talking about CSS variables aka custom property so we know that CSS can be immensely repetitive right and maintaining it can be cumbersome now if you're using a preprocessor like that you already used to declaring variables and keeping track of values in your style sheet well as we all kind of know since not too long ago you can add variables directly in CFS and like variables and pre-processors CSS variables they hold references to values that then you can reference to write your style sheets but there's plenty of differences to using CSS variables over preprocessor variables and they're formerly known as custom properties because you declare them using a new custom property syntax that means you can name them anything you want as long as you prefix them with those two dashes you go Songo value then refer to that property name and your CSS to use the value now for example if you're repeating the same color value in different places you can create a variable that so your font size or base color you set it to the repeated valid like you would a regular CSS property and what's cool is that they follow the rules of the Cascade so you first have to declare them on some element and you'll often declare variables that will be referenced by many elements like your base color or based on size on the root right so we have to scope them to an element usually the the root and what that does it's Cookson at the highest level of the Cascade that way the values are available everywhere and they can be referenced and inherited by all elements now the browser doesn't do anything right with a custom property or a robot first so to call the value you have to use the VAR function to reference the valued rather now with bar in place you know anytime you change the value for the constant property it gets propagated it gets passed down along to wherever it's being used and it makes your CSS work a little less error-prone and a bit easier right now a property value can contain more than one bar function like you see here that's use two bars to define a gradient it's also possible to assign a value to custom property using other variables like in this gradient custom property here and you can use them for fonts backs layout styles and so on so on to about code duplication now this isn't terribly exciting just yet right because we've been able to do this for some time with fasts or blasts and other imposed CSS right well custom properties weren't created just to be the CSS equivalent of preprocessor variables or even offer the same functionality right they can also do lots and lots of things that sister's camp so let's look at why the pre-processors in CSS variables they're like two different entities it's like they live in two completely different worlds first preprocessors they don't run on the browser and they live in a source file on your machine right and the preprocessors replaced variables with static values and they're compiled to CSS and the browser knows nothing about those variables in the variables themselves know nothing about your Dom structure now on the other hand CSS variables are entirely more flexible than preprocessor variables but so when you update the value of a CSS variable about the browser updates it anywhere it's referenced and it does it have runtime so this makes them incredibly dynamic and it opens up lots of other interesting possibilities and just replacing colors and font values so let's look at some those for example in fact you can't update the value of a variable from within a meteor query right but you can with CSS variables you can update them live inside media queries so for example we have this gutter variable here and it's initially scoped to the root element and then it's reference within the rule such that need a gutter with far and then you can use media queries to provide these new contacts that redefined the value of the gutter at certain break points so you can see that gutter property the values are updated live at each breakpoint right the values themselves are sort of responsive to that now CSS custom properties or variables they behave like regular property so that means they can inherit cascade and they can be scoped to any selector so here we have the space button class right and users variable to set the background color of the buttons and then instead of defining that button BG variable at the root scope like we did earlier we can declare it on different selectors like button modifier classes here right button call out button info and then we assign the values there and those selectors they provide a new scope and what's great is the properties they get resolved according to the normal and inherit and inheritance cascading rule size so the browser or updates values of that button I've just based on the class or the Dom element the variable scope to you can even update CSS variables inline within the style attribute that's sort of how live they are in the browser array so scoping CSS variables to Dom elements gives us even more interesting possibility since they follow the Cascade and inheritance we can and we could style them based on where they appear in the Dom so in other words were going to efficiently set how an element looks right when it's inside of another element look variable so for example to update the styles of a button component just based on whether it appears inside a a banner a card or a modal class you might create descendant selectors like this to do that right well with CSS variables we can update the styles without having to write these kind of complex selectors or descendant selectors that is going to couple your CSS to the Dom structure so what this does is it makes the components you build a completely expensive alright so now the button can display different font size a color background or any property just based on where it appears on the page and the CSS variables declared on its parent so here that this button rule is the CSS properties whose values we want to update dynamically with variables and then to change how that button appears inside a banner a card or a modal you define the different variables inside the selectors so now any button class that's a descendant of banner art or modal can inherit these properties and the best part is that you don't have to know anything about the context right we get this perfectly be mobile and reusable button clone you can also do simple calculations with CSS variables so here I handed use cases using the calc function to perform calculations that determine your length value so this is using variables to build pixel and values for margins now the variables cannot only be updated using inheritance as we saw earlier and David's talk you can also interact with them right using JavaScript you can get and set a CSS values from your JavaScript and that's where things start to get really interesting right so in this simple demo we had the ball that's moving around the page and it's just based on where you click on that page right now the background color and the CSS transform properties are all being updated live with JavaScript and the way you interact with the CFX variables with JavaScript is with the get property value and set property methods so back to the ball animation this uses variables right to set the values for the background color and the XY translation values being created with alpha and then in your JavaScript it's able to set the background color and those translation values with a set property method so here we're just setting the values and not getting them so for example within a click event listener sending the translation values to those XY coordinates at which the clicking happens with position x position Y properties and then to change the background color values setting that that ball BG property to random X L with a helper function there so now that you've seen how and where CSS variables work you should know where they do not work so you cannot use CSS variables and selectors you can't use them in property names either you can only use them in values they're also not valid in media query expressions which is kind of a bummer I wish they were and you can't use them to create length values like the middle box rule here that's invalid and again you should use calc to build your length values using CSS variables cool so let's switch gears here the the evolution of CSS keeps providing more and more ways to help us make creative decisions in the browser right because many of today's features resemble a lot of tools you'd normally use in your graphics editor so blend modes or example you might have worked with some of these now blend modes are part of the compositing and blending CSS spec compositing meaning combining two or more elements into one like compositing an image with its backdrop and blending is a form of compositing that calculates the mixing of colors wherever an element in its background over overlaps so it defines how those colors mix in the overlapping areas and CSS gives us two properties to create and blend elements together so we have a background blend mode mix blend mode and let's take a look at some of these so the background blend mode properly blends an element with background layer and the background can be an a gradient that can be a color and so for example in this header rule here we are blending a background image with a linear gradient and then we're given it a background blend with a multiply which it's a common value for that now what multiply does is it modifies the background area by multiplying the colors in the image by the colors of the linear gradient in this particular combination makes for more vibrant and a beautiful background image right you'll find that the background blend mode options are very similar to ones you'd find in Photoshop rides you have screening overlay dark and saturation and a bunch more now mixed blend mode is a little different in that it blends the the content of an SVG or HTML element with any content that's painted underneath it so we're not just limited to background areas so that means you can blend or a composite two or more embedded images together so for example here this image is inside a header it has a dark background area and what CSS we can seamlessly blend them together by setting the images mix blend mode to lighten because of that dark area now when I found out that you could blend an image element with a background layer I started using the explained mode to help give my grayscale images some life right and in color and create custom sets of colors for images so for example it's rounded image and I did have to place it inside additive or inside a containing element to do this but you can give that div or a containing element a background color or a gradient and then for instance use multiply to just blend it together with the background of its parent and what's cool that great scale images tend to have smaller file sizes than color images so you can take advantage of that in these grayscale images and explain those to apply pretty much any series of colors to your images and you could also do this with SVG right you can use the image element to render a raster image and you give the SVG a background and then you use your mix blend mode and this way you avoid writing some of that extra CSS that's required to make that image fit inside that if ah and here's another example of explain mode being used to create that knock out text effect and for this one it's kind of slow but I animated the background right so you can really see that the true blending and compositing power of mix blend mode now another one of my favorites new cssm it effects that isn't part of blending and compositing but it is part of the filters level two spec is back drop filter so if you've worked with CSS filters you know that you can apply a series of these filter Photoshop like effects HTML elementally you can have a blur drop shadow very scale contracts and invert and a bunch of others well the backdrop filter property lets you add some of those same effects but to the area behind an element right so the way this works it needs at least two elements to work property properly the backdrop filter feature so you need a target element that you apply the filter to like our field to a rule here and then you need to element behind or underneath the target and that's the backdrop area that's the area that's going to be affected by and you apply the filter effects do so for instance this is setting the backdrop filter to invert the colors by a hundred percent and blend them by two pixels so it's so any area behind that and see I made this draggable so yep so that that's the filter element here which so if you take a look at this later you'll see when you drag it around you can see the colors in Kurt in the background oh here we go I like doing it here there it is there we go so yeah so the colors are inverting and then the backdrop here it's being blended now the backdrop filters can also enhance the models and overlay than your design so for instance this overlay box there's a filter behind it that blurs the dye for an area and darkens the hue to draw more attention to that overlay box and the content and there animatable to that's one of the best parts so you till you have a gallery or a product page where you need to click to expand something right well backdrop filter can enhance that and make it more interesting so here it's blurring the background and adjusting the hue when the image scales up so being able to apply these kind of blending and filtering effects the HTML elements just with CFS really gives us a lot of power and flexibility when we're designing and building our projects now in a similar vein one feature that is sort of letting us break out of that commonplace rectangular nature displaying content on the web if CSS shapes because our designs usually consist of shapes like polygons and circles but our content is usually contained with these rectangular boxes well shapes provide a whole new way to set our how our context wraps or flows on the page so we're able to use geometric shapes as CSS values and have our text flow around those shapes so for now the the shapes feature only works on floated element using the new shape outside property so for instance we can take this circular image here float it left in our design and then define an out shape outside property to turn on the safe feature that's what makes it work and then the value you see here the circle function that's the new function that's going to create the CSS shape it's a for example it's going to set the inline text to flow around the circular shape of the image so that's pretty neat but what's what's interesting is that you can also leverage the box model and use regular box model keyword values to flow content around a circular image for example so the image already uses a border radius to create that circle or effect so instead of having a browser to do a little bit of extra work to redefine a circular shape you can set shape outside to border box all pretty familiar with that and then the text will follow the outer image the outer wrap images circular border now the way you apply a margin when you're using these box model keyword values is with the new shape margin property as per example here we're setting it to 20 pixels and this is also a new new property of the shapes module now the polygon function that's the one that's going to give you unlimited shaped possibilities in your design right with polygon you create a shape by defining those XY coordinates for each point in the polygon so for example you can set a text to flow around the right edge of a triangle using three polygon points and that will give you something like this you see the content wrapping around the right slanted edge this one's a little bit more complex I define multiple polygon points to set the heading in paragraph to flow around the contours of my coworker Nick and yeah use these the handy CSS shapes editor tool it's a Chrome extension to create this and a lot of the shapes I'd experiment with but polygon and if you haven't seen this yet it's an interactive shapes editor that lets you edit polygons points and you can immediately visualize how your the text is going to flow around the shape you set now a feature that works very well along take long side shapes is the clip pet so clipping is a longtime teacher of graphic design that's you stood partially or fully high parts of a graphics and CSS the clip path property lets you clip portions of an HTML element and like CSS J's we're not limited to rectangular clipping paths we're able to draw clipping regions with basic shapes polygon points even in SVG and so we use the clip path property and that's going to create a clipping region that will set the visible portions of an element so for example you can quickly and easily remove background portions of an image in your design for example this dark area here and we're giving clip paths the circle property it's a circle function and that's one of the basic shape functions that's going to define a clipping path so now any part outside of that clipping region they become hidden or or clipped right to reveal the circular image so using what's great is that using clip path and CSS shapes they work hand-in-hand so you can reuse your clip path values right - to define a shape around your clipping path they both use it exactly the same syntax that for example here we're providing the shape outside property the same exact circle function we gave clip back and that's going to flow the text around that clip region looks really wide there so in your markup you can also do this with SVG right so you use the the clip path SVG element inside it and you define all your polygon points and then in your CSS you can reference that clip app with the clip a property the URL function and then you call up the clip path ID and then that could produce something like this right so this is a heading with a div it with a background image and as you can see that the polygon points they follow the exact shapes of the mountaintops so as a result those portions get clipped and clip out the the bottom part of the text now to help you set clipping paths developer Bennett feely he built this really fun and useful tool it's an interactive tool called Clippy and you can use the tool to create clip paths shakes or just simply experiment with what CSS clip paths can do for you right so to give you an example we've all seen that trendy slanted header effect on websites and applications I've seen it done with pseudo elements and transform so I've seen it done with SPG's or with an image what will it - like clip e in clip path you can really create it pretty quickly in a few seconds to drag the controls around to create the shapes then copy and paste the code it spits out it into your CSS for example they had a rule and you and you get that visual effect and what's great is that when you use percentage based coordinates it's going to give you flexible and responsible clipping paths all right now color module level 4 is going to give you new interesting ways to apply color values in your CSS so you're going to have new color functions that let you adjust and modify colors you're going to have new values for setting the opacity of colors and one of those is 8 digit hex notation and this is going to let you set RGB a channels as regular hexadecimal values so in other words you get to do alpha directly in hex by simply tacking on a pair of digits to to the value so those last two digits specify the Alpha Channel of the color we're value of zero zero gives you a fully transparent color and FF represents a fully opaque color and it uses the the regular hexadecimal system to define the Alpha so if you're used to defining your values in RGB a or hsla you'll find that it can be a little bit unintuitive at first so for instance if you want to set a 50 percent transparency you're going to use 80 not 50 and then 80 would be CC 20 is 33 and so on so it can be a little tricky at first but there are some charts out there that you can use as a preference for 8 digit X values for alpha and one of the best places to use these are going to be in places where you've already defined hex values and you just want to add a city to it right or if you just heart using hex values in general you're those extra two digits might save you the time it might take to look up the RGB equivalent of a color now browser support for a digit hex is currently limited it's limited to Firefox and Safari but you can also use it in Chrome if you've enabled the experimental web platform features now not all hex RGB HSL values are easy to remember right so if you if you're writing plain CSS changing or adjusting a color value often means having a reference your graphics editor or color tool and pre-process letters already offer color functions right that can apply transparency to colors have functions that can darken them lighten and blend them well CSS is about to take a huge leap forward and get a color modification function of its own the new color mod function is going to let you manipulate colors by taking a regular color value and applying color adjusters to it and these color adjusters are like smaller functions within color mod that for example can adjust the color few the Alpha lightness saturation blend colors together and lots lots lots more now this bag for this function is still a working draft but doesn't really have browser so good browser support yet but you can use it you can start using it in post ESS it has a color function that works exactly the way the color mod function is supposed to work and in fact color models named color and it was recently renamed color mod and you can begin experimenting with it in code pen if you've been able to post CSS and the color function atom so let's take a look at some of those works so for example we have a lightness adjuster here and that lightens a color value by the specified amount so for example 20% here you can also take away lightness by setting a negative percentage value but the best part is that you can pass two or more adjusters to your color mod function so alongside alpha and lightness the hue adjuster you see here changes the view of a color by rotating the color wheel by the specified amount so for example 5 degrees here now if you throw CSS variables into the mix you can start to see how useful the color mod function can be for creating color palettes in your design from a small set of colors or from a single base color so here we have a set of color variables and they're created from a base color crimson and it's using adjusters like hue and lightness and it's even getting the complementary colors just to create strong visual contrast so now you can change that base color to any value like cornflower blue hot pink iein crimson and the rest of the colors are just going to adjust to that base value the route the result is a completely different color combination each time so having a way to quickly explore and manipulate colors on the fly right while working in the browser with a simple intuitive function like color mine's going to be a huge huge one for CSS and there's a really neat tool out there called color video and you can use these to compose your colors and experiment with all the color functions and all the adjusters cool let's keep moving so selectors level four there's a lots and lots of new selectors on the wave and level four now many of them are not supported by browsers yet because it's still sort of a working draft now I'll spend a little bit of time covering some of the selectors that I've found useful just a myelin work and something to have the most browser support and one of those is Nexus so matches is a functional pseudo class and it's going to help you write complex selectors or descendant selectors a lot faster and what it really does is just provide a little syntactic sugar for creating groups of descendants direct child even sibling selectors so matches is it takes of regular selectors as argument so for example here the selector is going to match any button class that's a descendant of card modal in form and it's the same as writing the the full selector group you see there below it you can also pass photo classes so this is going to make it a lot easier to for example style your links this is targeting the hover focus and active visit it all at once and inside matches you can pass through two elements and combinators but you can still create selectors using matches in a Combinator outside that argument list so for instance this is going to match any paragraph that's a adjacent sibling of image paragraph and form and as you can see it just saves a little time right by helping you to avoid writing out all those selector combinations manually now if you do a search for browser support on matches you'll find that it's implemented under the name any as it was originally known but it looks like it's going to be standardized in level 4 under the name matches those are the new optionality pseudo classes that target form controls like text fields text areas and select and it targets them based on whether they are optional or required so you can spell them differently and there's the ones I really enjoyed using and had fun in my own work are the validity pseudo classes and these let you give your users visual feedback just based on the validity of the data they type into a field so for example if you have an email input field that's required you can define invalid and valid pseudo classes that style then just based on what you types into the field so here's the Texas if you've entered a valid email format for example and then at pseudo-classes to the mix sorry pseudo elements to the mixin and it can be really useful it gives you there's even more visual feedback like you can display an icon when the data goes from invalid to valid so here's going to display that smiley emoji for example now you can take things a few steps further and display an icon for both in valid and invalid emails now normally you'll maybe use JavaScript right to to do something like this but we'll see the size you get these input validation checks for free now it's not going to check if the email itself is a valid email it's just validating the inputs according to the validity semantics defined by HTML as a few sites out there that can help you keep track on browser support for these level 4 selectors if you don't want to individually search for them on for example can I use com you can use CSS for selectors com to see if your browser supports some of these and it'll let you know now finally some of the features I talked about they're not they're new to browsers right so they're not all supported yet everywhere but that shouldn't mean that you can't use them or at least begin experimenting with them right you're still able to use a lot of those today while providing these elegant fallbacks for browsers that don't support them using feature queries so the app support rule is bringing native feature detection to CSS so I can analyze whether or not a browser supports a CSS property it looks a lot like a media query so for example here at the bottom this is querying for grid layout and it's specifying the the property value pair used to define a grid display grid so then inside the rule we're inside the supports rule we are including all the the grid styles for the content and then flexbox currently has better support than grids right so the browsers that don't support read layout are going to layout the content using the Flex box properties defined outside the feature foyer so it's kind of like having moderniser which is a feature detection tool built with JavaScript but right in the browser it's going to perform a lot faster and you can query multiple features at once so for example here up top we the and operator and that's checking for grid and writing modes of work and writing mode is also a new CSS property that changes the layout in alignment of text so in browser supporting both features users will do something like this and browsers that don't support these will simply display a normal heading in paragraph which isn't a big deal and as you can see there they have really good browser support the feature queries do and the supports rule and browsers that don't support these feature queries they're going to ignore what's written inside the support rule and just fall back to your regular CSS and finally here's the list of the browser support links I talked about earlier that covers all the features I talked today I talked about today and yeah as with almost anything in front-end web development and web development there's so many features and factors to consider when building your projects so many of the things I've covered are really enhancement features right so you don't want to overdo it and you want to be sure that your design and content still still speaks to your users even with some of these features in place so hopefully what I talked about today gives you lots of interesting new ideas for your next project and as I always tell students that treehouse right this use all the guidelines and suggestions and the things you learn and see just the final works best for you and your project in your team you don't have to immediately use all the new things and learn everything just because they're popular at the moment right matter of preference a lot of it so what's important you develop your own approach style and just because since consistent about it right and that's all I have to say thanks I love tree huh

Channel: JSConf

Views: 7,837

Rating: 4.9620852 out of 5

Keywords: CSS, Cascading Stylesheets, CSSconf EU, Guil Hernandez, CSS Variables, CSS Custom Properties, Media Queries, CSS Selectors, blend-mode, clip-path, colors

Id: UMwunYQGvhs

Length: 31min 41sec (1901 seconds)

Published: Tue Jun 06 2017