{"id":299880,"date":"2019-12-05T07:42:51","date_gmt":"2019-12-05T14:42:51","guid":{"rendered":"https:\/\/css-tricks.com\/?p=299880"},"modified":"2019-12-05T07:42:51","modified_gmt":"2019-12-05T14:42:51","slug":"firefox-71-first-out-of-the-gate-with-subgrid","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/firefox-71-first-out-of-the-gate-with-subgrid\/","title":{"rendered":"Firefox 71: First Out of the Gate With Subgrid"},"content":{"rendered":"
A great release from Firefox this week! See the whole roundup post from Chris Mills<\/a>. I’m personally stoked to see <\/p>\n But there are two other things I think are a very big deal<\/strong>:<\/p>\n A great release from Firefox this week! See the whole roundup post from Chris Mills. I’m personally stoked to see clip-path: path(); go live, which we’ve been tracking as it’s so clearly useful. We also get column-span: all; which is nice in case you’re one of the few taking advantages of CSS columns.<\/p>\n","protected":false},"author":3,"featured_media":299926,"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":[17],"tags":[1471,1567],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/subgrid-markup.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299880"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=299880"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299880\/revisions"}],"predecessor-version":[{"id":299928,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299880\/revisions\/299928"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/299926"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=299880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=299880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=299880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}clip-path: path();<\/code> go live, which we’ve been tracking<\/a> as it’s so clearly useful. We also get
column-span: all;<\/code> which is nice in case you’re one of the few taking advantages of CSS columns<\/a>. <\/p>\n
\n
img { max-width: 100%; }<\/code>, you’re subject to somewhat janky loading as those images load in because the browser doesn’t know how tall the space to reserve needs to be until it knows the dimensions of the image. But now, if you put width\/height attributes (e.g.
<img width=\"500\" height=\"250\" src=\"...\"><\/code>), Firefox (and Chrome) will calculate the aspect ratio from those and reserve the correct amount of space. It seems like a small thing, but it really isn’t. It will improve the perceived loading for a zillion sites.<\/li>\n
display: subgrid;<\/code> to have them inherit lines instead in supporting browsers.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"