{"id":19376,"date":"2012-12-09T10:42:05","date_gmt":"2012-12-09T17:42:05","guid":{"rendered":"http:\/\/css-tricks.com\/?p=19376"},"modified":"2012-12-09T10:42:05","modified_gmt":"2012-12-09T17:42:05","slug":"css-next","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-next\/","title":{"rendered":"CSS Next"},"content":{"rendered":"

Divya Manian runs through many of the latest stuff coming in CSS. Including several things I’m hearing about for the first time, like specifying unicode range for an @font-face and canvas-as-background.<\/p>\n

If you can’t get enough, this talk by Tab Atkins<\/a> (only works in Chrome) covers even more upcoming stuff, including more I’d never heard of. Things like image-interpolation<\/code> (determines how images scale, like keeping sharp pixel boundaries), setting font-size with ex<\/code> which is based on x-height (will be awesome for icon fonts), and an attr()<\/code> function which allows you to use attribute values in styles.<\/p>\n","protected":false},"excerpt":{"rendered":"

Divya Manian runs through many of the latest stuff coming in CSS. Including several things I’m hearing about for the first time, like specifying unicode range for an @font-face and canvas-as-background. If you can’t get enough, this talk by Tab Atkins (only works in Chrome) covers even more upcoming stuff, including more I’d never heard […]<\/p>\n","protected":false},"author":3,"featured_media":0,"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":false,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":306133,"url":"https:\/\/css-tricks.com\/some-typography-links\/","url_meta":{"origin":19376,"position":0},"title":"Some Typography Links II","date":"April 3, 2020","format":false,"excerpt":"I just can't stop bookmarking great links related to typography. I'm afraid I'm going to have to subject you, yet again, to a bunch of them all grouped up. So those of you that care about web type stuff, enjoy. I know there are lots of good reasons to be\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":199400,"url":"https:\/\/css-tricks.com\/fout-foit-foft\/","url_meta":{"origin":19376,"position":1},"title":"FOUT, FOIT, FOFT","date":"April 1, 2015","format":false,"excerpt":"A (very) brief look at custom font loading. How browsers handle that, how we can exert control over it, and the acronyms invented to describe it.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":331882,"url":"https:\/\/css-tricks.com\/a-font-display-setting-for-slow-connections\/","url_meta":{"origin":19376,"position":2},"title":"A font-display setting for slow connections","date":"December 31, 2020","format":false,"excerpt":"Me, I really dislike FOUT. I like that it's an option, because not displaying text quickly on the web is no good. I know font-display: swap; is popular because it's good for performance, but that FOUT stuff pains me. Matt Hobbs: If there\u2019s one thing I\u2019d like readers to take\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/performance-waterfall-fonts.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":196202,"url":"https:\/\/css-tricks.com\/accidental-css-resets\/","url_meta":{"origin":19376,"position":3},"title":"Accidental CSS Resets","date":"February 18, 2015","format":false,"excerpt":"Any time you use a shorthand property in CSS, you set all the values for all the properties it deals with. It's not a bug, it's just how CSS works. I've seen it confuse people plenty of times. Let's shine a light on the issue to hopefully make it more\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333512,"url":"https:\/\/css-tricks.com\/some-typography-blog-posts-ive-bookmarked-and-read-lately\/","url_meta":{"origin":19376,"position":4},"title":"Some Typography Blog Posts I’ve Bookmarked and Read Lately","date":"February 4, 2021","format":false,"excerpt":"Font-size: An Unexpectedly Complex CSS Property \u2014 From Manish Goregaokar in 2017. Of many oddities, I found the one where font: medium monospace renders at 13px where font: medium sans-serif renders at 16px particularly weird.The good line-height \u2014 Since CSS supports unitless line-height, you probably shouldn't be setting a hard\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/font-vector-points.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305595,"url":"https:\/\/css-tricks.com\/maintaining-performance\/","url_meta":{"origin":19376,"position":5},"title":"Maintaining Performance","date":"March 27, 2020","format":false,"excerpt":"Real talk from Dave: I, Dave Rupert, a person who cares about web performance, a person who reads web performance blogs, a person who spends lots of hours trying to keep up on best practices, a person who co-hosts a weekly podcast about making websites and speak with web performance\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/dave-rupert-webpagetest-comparison.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19376"}],"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=19376"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19376\/revisions"}],"predecessor-version":[{"id":19377,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19376\/revisions\/19377"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=19376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=19376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=19376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}