{"id":28295,"date":"2020-03-04T16:52:25","date_gmt":"2020-03-04T21:52:25","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=28295"},"modified":"2020-03-04T16:52:25","modified_gmt":"2020-03-04T21:52:25","slug":"wide-gamut-color-in-css-with-display-p3","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2020\/03\/04\/wide-gamut-color-in-css-with-display-p3\/","title":{"rendered":"Wide Gamut Color in CSS With Display-P3"},"content":{"rendered":"<p><a href=\"https:\/\/webkit.org\/blog\/10042\/wide-gamut-color-in-css-with-display-p3\/\">Nikita Vasilyev<\/a> (<a href=\"https:\/\/news.ycombinator.com\/item?id=22467744\">Hacker News<\/a>):<\/p>\n<blockquote cite=\"https:\/\/webkit.org\/blog\/10042\/wide-gamut-color-in-css-with-display-p3\/\"><p>WebKit is the only browser engine that supports Display-P3 color as of January 2020.<\/p><p>[&#8230;]<\/p><p>One way to provide a fallback is to include the same property with the sRGB color before:<\/p><pre>header {\n    color: rgb(0, 255, 0);\n    color: color(display-p3 0 1 0);\n}\n<\/pre><p>Browsers other than WebKit currently parse <code>color(&#8230;)<\/code> as invalid value. CSS properties with invalid values are ignored by the browsers.<\/p><p>Alternatively, you can use <code>@supports<\/code> feature query.<\/p><\/blockquote>","protected":false},"excerpt":{"rendered":"<p>Nikita Vasilyev (Hacker News): WebKit is the only browser engine that supports Display-P3 color as of January 2020.[&#8230;]One way to provide a fallback is to include the same property with the sRGB color before:header { color: rgb(0, 255, 0); color: color(display-p3 0 1 0); } Browsers other than WebKit currently parse color(&#8230;) as invalid value. [&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":"2020-03-04T21:52:27Z","apple_news_api_id":"523e71c3-0705-46b1-82d7-ccac9c821b49","apple_news_api_modified_at":"2020-03-04T21:52:27Z","apple_news_api_revision":"AAAAAAAAAAD\/\/\/\/\/\/\/\/\/\/w==","apple_news_api_share_url":"https:\/\/apple.news\/AUj5xwwcFRrGC18ysnIIbSQ","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":[566,338,31,1667,30,1666,96,328],"class_list":["post-28295","post","type-post","status-publish","format-standard","hentry","category-technology","tag-color","tag-css","tag-ios","tag-ios-13","tag-mac","tag-macos-10-15","tag-web","tag-webkit"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/28295","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=28295"}],"version-history":[{"count":1,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/28295\/revisions"}],"predecessor-version":[{"id":28296,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/28295\/revisions\/28296"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=28295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=28295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=28295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}