{"id":35270,"date":"2022-03-14T17:11:07","date_gmt":"2022-03-14T21:11:07","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=35270"},"modified":"2022-03-14T17:11:38","modified_gmt":"2022-03-14T21:11:38","slug":"web-views-in-system-preferences","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2022\/03\/14\/web-views-in-system-preferences\/","title":{"rendered":"Web Views in System Preferences"},"content":{"rendered":"<p><a href=\"https:\/\/blog.jim-nielsen.com\/2022\/inspecting-web-views-in-macos\/\">Jim Nielsen<\/a> (via <a href=\"https:\/\/mjtsai.com\/blog\/2022\/03\/07\/mac-software-stagnation\/#comment-3644890\">Old Unix Geek<\/a>, <a href=\"https:\/\/news.ycombinator.com\/item?id=30648424\">Hacker News<\/a>):<\/p>\n<blockquote cite=\"https:\/\/blog.jim-nielsen.com\/2022\/inspecting-web-views-in-macos\/\">\n<p>I&rsquo;m intrigued by the ability to use <a href=\"https:\/\/blog.jim-nielsen.com\/2021\/css-system-colors\/\">system colors in CSS<\/a> and these web views in macOS show how engineers at Apple are leveraging <a href=\"https:\/\/blog.jim-nielsen.com\/2021\/things-i-learned-reading-webkits-ua-stylesheet\/\">non-standard CSS keywords in Webkit<\/a> to mimic UIs in macOS which are otherwise built with native system APIs.<\/p>\n<p>It&rsquo;s kind of like opening the developer tools in an Electron app, except these are native macOS apps with web views parading as system UI. <\/p>\n<p>I&rsquo;ve poked around in the &ldquo;Apple ID&rdquo; and &ldquo;Family Sharing&rdquo; panes in the macOS System Preferences where I&rsquo;ve spotted a few intriguing details.<\/p>\n<\/blockquote>\n\n<p>I ran into one of these Web views in the Music app when <a href=\"https:\/\/mjtsai.com\/blog\/2022\/03\/11\/which-nas-for-a-mac\/#comment-3645095\">trying to<\/a> manage my Apple News+ subscription.<\/p>\n\n<p>Previously:<\/p>\n<ul>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2022\/03\/07\/mac-software-stagnation\/\">Mac Software Stagnation<\/a><\/li>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2022\/02\/10\/micro-blog-moving-ios-app-to-react-native\/\">Micro.blog Moving iOS App to React Native<\/a><\/li>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2022\/02\/25\/system-preferences-reimagined\/\">System Preferences Reimagined<\/a><\/li>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2021\/12\/16\/music-app-and-tv-app-use-jet-in-macos-12-2-beta\/\">Music.app and TV.app Use JET in macOS 12.2 Beta<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Jim Nielsen (via Old Unix Geek, Hacker News): I&rsquo;m intrigued by the ability to use system colors in CSS and these web views in macOS show how engineers at Apple are leveraging non-standard CSS keywords in Webkit to mimic UIs in macOS which are otherwise built with native system APIs. It&rsquo;s kind of like opening [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2022-03-14T21:11:09Z","apple_news_api_id":"fcf36f30-ab0f-4192-b73f-a97a75c38129","apple_news_api_modified_at":"2022-03-14T21:11:41Z","apple_news_api_revision":"AAAAAAAAAAAAAAAAAAAAAA==","apple_news_api_share_url":"https:\/\/apple.news\/A_PNvMKsPQZK3P6l6dcOBKQ","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[338,30,2077,1816,1181,328],"class_list":["post-35270","post","type-post","status-publish","format-standard","hentry","category-technology","tag-css","tag-mac","tag-macos-12","tag-music-app","tag-system-preferences","tag-webkit"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/35270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=35270"}],"version-history":[{"count":2,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/35270\/revisions"}],"predecessor-version":[{"id":35272,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/35270\/revisions\/35272"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=35270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=35270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=35270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}