webplatform.news<\/a> for more information.<\/p>\n<\/button><\/p>\n","protected":false},"excerpt":{"rendered":"
In this week’s roundup, the string length of two emojis is not always equal, something to consider before making that rounded button, and we may have a new way to share web apps between devices, even when they are offline.<\/p>\n","protected":false},"author":245432,"featured_media":296201,"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":[466,1511,1488,1421],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/wpn-20190919.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":321233,"url":"https:\/\/css-tricks.com\/changing-emoji-skin-tones-programmatically\/","url_meta":{"origin":296196,"position":0},"title":"Changing Emoji Skin Tones Programmatically","date":"September 17, 2020","format":false,"excerpt":"So, you know how many emoji have different skin tones? Emoji skin tones are extremely popular, especially over text and on social media. The raised black fist emoji (\u270a\ud83c\udfff) was voted \u201cThe Most 2020 Emoji\u201d by Emojipedia\u2019s World Emoji Awards. Each tone is a modifier and many emoji are made\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/emoji-skin-tone-modifiers.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":337636,"url":"https:\/\/css-tricks.com\/platform-news-rounded-outlines-gpu-accelerated-svg-animations-how-css-variables-are-resolved\/","url_meta":{"origin":296196,"position":1},"title":"Platform News: Rounded Outlines, GPU-Accelerated SVG Animations, How CSS Variables Are Resolved","date":"April 2, 2021","format":false,"excerpt":"In the news this week, Firefox gets rounded outlines, SVG animations are now GPU-accelerated in Chrome, there are no physical units in CSS, The New York Times crossword is accessible, and CSS variables are resolved before the value is inherited. Let's jump in the news! Rounded outlines are coming to\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/wpn-20210402.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":296516,"url":"https:\/\/css-tricks.com\/enhancing-the-clickable-area-size\/","url_meta":{"origin":296196,"position":2},"title":"Enhancing The Clickable Area Size","date":"October 1, 2019","format":false,"excerpt":"Here\u2019s a great post by Ahmad Shadeed on making sure that clickable areas in our interfaces are, well, clickable. He writes about making sure that links, buttons and other elements meet accessibility standards for both touch and mouse, too. I particularly like the section where Ahmad writes about making a\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/pointer-click.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":354804,"url":"https:\/\/css-tricks.com\/css-ing-candy-ghost-buttons\/","url_meta":{"origin":296196,"position":3},"title":"CSS-ing Candy Ghost Buttons","date":"October 31, 2021","format":false,"excerpt":"Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people have come up with and remake them with clean and compact code... I came across these candy ghost buttons! They\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/target_candy_boo_result-1.png?fit=799%2C279&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":323780,"url":"https:\/\/css-tricks.com\/creating-css-shapes-with-emoji\/","url_meta":{"origin":296196,"position":4},"title":"Creating CSS Shapes with Emoji","date":"October 23, 2020","format":false,"excerpt":"CSS Shapes is a standard that lets us create geometric shapes over floated elements that cause the inline contents \u2014 usually text \u2014 around those elements to wrap along the specified shapes. Such a shaped flow of text looks good in editorial designs or designs that work with text-heavy contents\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/css-shape-emoji.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":331670,"url":"https:\/\/css-tricks.com\/responsible-conditional-loading\/","url_meta":{"origin":296196,"position":5},"title":"Responsible, Conditional Loading","date":"December 25, 2020","format":false,"excerpt":"Over on the Polypane blog (there's no byline but presumably it's Kilian Valkhof (it is)), there is a great article, Creating websites with prefers-reduced-data, about the prefers-reduced-data media query. No browser support yet, but eventually you can use it in CSS to make choices that reduce data usage. From the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/network-info-c451ffd2ba.png?fit=1200%2C651&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\/09\/wpn-20190919.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296196"}],"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=296196"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296196\/revisions"}],"predecessor-version":[{"id":338458,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/296196\/revisions\/338458"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/296201"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=296196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=296196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=296196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/emoji-string-length.png?ssl=1\")
<\/figure>\n