{"id":304543,"date":"2020-03-03T08:18:04","date_gmt":"2020-03-03T15:18:04","guid":{"rendered":"https:\/\/css-tricks.com\/?p=304543"},"modified":"2020-03-04T06:39:31","modified_gmt":"2020-03-04T13:39:31","slug":"making-things-better-redefining-the-technical-possibilities-of-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/making-things-better-redefining-the-technical-possibilities-of-css\/","title":{"rendered":"Making Things Better: Redefining the Technical Possibilities of CSS"},"content":{"rendered":"\n<p>Robin recently lamented the common complaint that <a href=\"https:\/\/css-tricks.com\/why-is-css-frustrating\/\">CSS is frustrating<\/a>. There are misconceptions about what it is and what it does. There are debates about what kind of language it is. There are even different views on <em>where<\/em> it should be written.<\/p>\n\n\n\n<p>Rachel Andrew has a <a href=\"https:\/\/aneventapart.com\/news\/post\/making-things-better-aea-video?utm_source=CSSTricks&amp;utm_medium=web&amp;utm_campaign=csstricks\" rel=\"noopener\">new talk<\/a> from <a href=\"https:\/\/aneventapart.com\/event\/washington-dc-2019\/?utm_source=CSSTricks&amp;utm_medium=web&amp;utm_campaign=csstricks\" rel=\"noopener\">An Event Apart DC 2019<\/a> available that walks us back; back to the roots of the issues we used to have with CSS and the &#8220;hacks&#8221; we used to overcome them. CSS has changed a lot over the past few years and, while those changes have felt complex and confusing at times, they are designed to solve what we have always wanted CSS to do.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>The full hour it takes to watch the talk is well worth the time. Here are a few nuggets that stood out. First off, some de-bunking of common CSS complaints:<\/p>\n\n\n\n<ul><li><strong>You never know how tall anything is on the web.<\/strong> Floats never solved this because they only bring things next to each other instead of knowing about the items around them. New layout methods, including CSS Grid and Flexbox, actually look at our elements and help them behave consistently.<\/li><li><strong>Flexbox is weird and unintuitive.<\/strong> It&#8217;s not the layout method you might think it is. If we view it as a way to line things up next to each other, it&#8217;s going to feel weird and behavior weirdly as well. But if we see it for what it is &#8211; a method that looks at differently sized elements and returns the most logical layout &#8211; it starts to make sense. It assigns space, rather than squishing things into a box.<\/li><\/ul>\n\n\n\n<p>Rachel continues by giving us a peek into the future of what CSS wants to do for us:<\/p>\n\n\n\n<ul><li><strong>CSS wants to avoid data loss.<\/strong> New alignment keywords like <code>safe<\/code> and <code>unsafe<\/code> will give us extra control to define whether we want CSS to aggressively avoid content that&#8217;s unintentionally hidden or allow it to happen.<\/li><\/ul>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"5\"><code markup=\"tt\">.container {\n  display: flex;\n  flex-direction: column;\n  \/* Please center as long as it doesn't result in overflow *\/\n  align-items: safe center;\n}<\/code><\/pre>\n\n\n\n<ul><li><strong>CSS wants to help us get real with overflow.<\/strong> The<code>min-content<\/code> and <code>max-content<\/code> keywords make it possible to create boxes that are wide enough for the content but not wider, and boxes that are as big as the content can be.<\/li><\/ul>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n  width: min-content; \/* Allow wrapping *\/\n}<\/code><\/pre>\n\n\n\n<ul><li><strong>CSS wants to lay things out logically.<\/strong> The web is not left-to-right. Grid and Flexbox quietly introduced a way of thinking start-to-end that is direction agnostic. That has brought about a new specification for <a href=\"https:\/\/www.w3.org\/TR\/css-logical-1\/\" rel=\"noopener\">Logical Properties and Values<\/a>.<\/li><li><strong>CSS wants to make content more portable.<\/strong> <a href=\"https:\/\/www.w3.org\/TR\/css-regions-1\/\" rel=\"noopener\">CSS Regions<\/a> let us flow content from one element into another. While it&#8217;s probably a flawed comparison, it&#8217;s sorta like the pipes in old school Mario Bros. games where jumping in one pipe at one location will plop your character out of another pipe in another location&#8230; but we get to define those sources ourselves and without angry plants trying to eat us along the way.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mario-pipes.jpg?ssl=1\" alt=\"\" class=\"wp-image-304565\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Anyway, these are merely scratching the surface of what Rachel covers in her talk. It&#8217;s a good reminder that An Event Apart has an <a href=\"https:\/\/aneventapart.com\/news\/videos\/?utm_source=CSSTricks&amp;utm_medium=web&amp;utm_campaign=csstricks\" rel=\"noopener\">entire library of valuable talks from amazing speakers<\/a> and that attending an AEA event is an invaluable experience worth checking out. Rachel&#8217;s talk was from last year&#8217;s Washington D.C. event and, as it turns out, the <a href=\"https:\/\/aneventapart.com\/event\/washington-dc-2020\" rel=\"noopener\">very next event is taking place there this April 13-15<\/a>. If you can&#8217;t make that one, there are <a href=\"https:\/\/aneventapart.com\/events\/?utm_source=CSSTricks&amp;utm_medium=web&amp;utm_campaign=csstricks\" rel=\"noopener\">several others<\/a> throughout the year across the United States.<\/p>\n\n\n\n<p>Oh, and of course we have a discount code for you! Use <code>AEACP<\/code> for $100 off any show.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Robin recently lamented the common complaint that CSS is frustrating. There are misconceptions about what it is and what it does. There are debates about what kind of language it is. There are even different views on where it should be written. Rachel Andrew has a new talk from An Event Apart DC 2019 available [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":288937,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[508,17],"tags":[586],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/aea-boston-2019-2.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304543"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=304543"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304543\/revisions"}],"predecessor-version":[{"id":304668,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304543\/revisions\/304668"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/288937"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=304543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=304543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=304543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}