webplatform.news<\/a> for more information.<\/p>\n<\/style>\n<\/code><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
In this week’s week roundup of browser news, a trick for loading images conditionally using the picture element, your chance to tell bowser vendors about the web you want, and the styles applied to inline SVG elements are, well, not scoped only to that SVG. Let’s turn to the headlines…<\/p>\n","protected":false},"author":245432,"featured_media":293638,"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":[1649,4],"tags":[1471,829,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/web-platform-news-190801.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":248378,"url":"https:\/\/css-tricks.com\/totally-forgot-print-style-sheets\/","url_meta":{"origin":293636,"position":0},"title":"I totally forgot about print style sheets","date":"November 28, 2016","format":false,"excerpt":"Manuel Matuzovic rediscovers @media print {} styles. The first thing he shows in this article is a tweet by Aaron Gustafson in which Indiegogo's website is pretty jacked up for print. It basically looks like a site in which none of the CSS loads at all, which is probably because\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":235423,"url":"https:\/\/css-tricks.com\/the-blur-up-technique-for-loading-background-images\/","url_meta":{"origin":293636,"position":1},"title":"The “Blur Up” Technique for Loading Background Images","date":"December 7, 2015","format":false,"excerpt":"The following is a guest post by Emil Bj\u00f6rklund. Filter effects in CSS have been around for a while, and together with things like blend modes, they bring new possibilities for recreating and manipulating stuff in the browser that we previously had to do in Photoshop. Here, Emil explores a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":199370,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-svg-fallbacks\/","url_meta":{"origin":293636,"position":2},"title":"A Complete Guide to SVG Fallbacks","date":"May 4, 2015","format":false,"excerpt":"If you're using SVG and are worried about unsupported environments, this is the guide for you. There is no single solution, since how you use SVG dictates the fallback.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/05\/svg-fallback-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":279419,"url":"https:\/\/css-tricks.com\/preventing-content-reflow-from-lazy-loaded-images\/","url_meta":{"origin":293636,"position":3},"title":"Preventing Content Reflow From Lazy-Loaded Images","date":"November 29, 2018","format":false,"excerpt":"You know the concept of lazy loading images. It prevents the browser from loading images until those images are in (or nearly in) the browser's viewport. There are a plethora of JavaScript-based lazy loading solutions. GitHub has over 3,400 different lazy load repos, and those are just the ones with\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/weightlift-image.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":297358,"url":"https:\/\/css-tricks.com\/digging-into-the-preview-loading-animation-in-wordpress\/","url_meta":{"origin":293636,"position":4},"title":"Digging Into the Preview Loading Animation in WordPress","date":"October 22, 2019","format":false,"excerpt":"WordPress shipped the Block Editor (aka Gutenberg) back in version 5.0 and with it came a snazzy new post preview screen that shows the WordPress logo drawing itself while the preview loads. That's what you get when saving a post draft and clicking the \"Preview\" button in the editor. How'd\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/wp-sketchy.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":337308,"url":"https:\/\/css-tricks.com\/lets-create-an-image-pop-out-effect-with-svg-clip-path\/","url_meta":{"origin":293636,"position":5},"title":"Let\u2019s Create an Image Pop-Out Effect With SVG Clip Path","date":"April 2, 2021","format":false,"excerpt":"Few weeks ago, I stumbled upon this cool pop-out effect by Mikael Ainalem. It showcases the clip-path: path() in CSS, which just got proper support in most modern browsers. I wanted to dig into it myself to get a better feel for how it works. But in the process, I\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/Featured-image.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/web-platform-news-190801.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293636"}],"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\/245432"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=293636"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293636\/revisions"}],"predecessor-version":[{"id":338468,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/293636\/revisions\/338468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/293638"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=293636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=293636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=293636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/web-we-want.png?ssl=1\")
<\/figure>\n