各家瀏覽器與工具對於 blur 效果的實際呈現比較
source link: https://blog.gslin.org/archives/2024/01/13/11585/%e5%90%84%e5%ae%b6%e7%80%8f%e8%a6%bd%e5%99%a8%e8%88%87%e5%b7%a5%e5%85%b7%e5%b0%8d%e6%96%bc-blur-%e6%95%88%e6%9e%9c%e7%9a%84%e5%af%a6%e9%9a%9b%e5%91%88%e7%8f%be%e6%af%94%e8%bc%83/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
各家瀏覽器與工具對於 blur 效果的實際呈現比較
在 Hacker News 上看到「Blur Radius Comparison (bjango.com)」，原文在「Blur radius comparison」。
重點在這張：
前面九個分成三種效果在三個不同的瀏覽器呈現的結果，然後是 Figma、Illustrator、Photoshop 與 Sketch 的效果。
可以看出來在瀏覽器上的部分，大家的 rendering 沒有差太多。
而 Figma 所有 blur 類的效果，在瀏覽器上比較接近的只有 box-shadow，其他三套則是有不同的變化...
Related
對於現在的瀏覽器，CSS 是否還需要加上 vendor prefix...
在「Do we need box-shadow or border-radius prefixes anymore?」這篇文章開頭就先給懶人包： 如果沒有圓角 (border-radius) 或是陰影 (box-shadow) 會造成使用者不順。 如果這四個平台 (以及瀏覽器) 的量夠大的話：Firefox 3.6-、Safari 4-、iOS 3.2-、Android 2.3-。 在這兩種情況下，你仍然需要加上 vendor prefix... 而比較長的說明，可以參考原文後半段，把這兩個效果分開說明。 如果是 Sass (SCSS) 使用者，就直接加吧，反正程式都幫你做好了... 雖然 validator 會叫 CSS 不合法，但也沒印象看過哪家瀏覽器會因為 css vendor prefix 就罷工... (真的有嗎？XD)
December 13, 2012In "Browser"
PNG 現況整理...
「Does PNG work everywhere?」這篇文章把 PNG 的現況整理成表格，並且附上不少圖片範例可以看。表格包括在處理圖片常用的 Photoshop 軟體，以及常見的問題瀏覽器 IE 各版本。 如果不牽扯到 Gamma correction 與 ICC profile，Mozilla Firefox、Safari (包括行動版本) 以及 Opera 對於不同格式的 PNG 都沒有什麼問題... 就這部份的結論是，IE6 只能用最基本的 PNG 格式，但如果同意讓 IE6 看到比較差的效果 (不是看不到)，不少格式可以用。 另外作者也不斷地再推廣使用 PNG 最佳化程式處理 PNG 檔，以節省空間。文章後面的 Troubleshooting 以及 Summary 章節很值得仔細看過一次，在腦袋裡面留下印象...
December 18, 2010In "Browser"
CSS 的 feature detection：@support
在「Conditional CSS」這篇裡面在講很多 CSS 條件過濾的方式，裡面看到有 @support 這個規格，可以透過 feature detection 的方式來過濾：「CSS at-rule: @supports: selector()」。 文章作者給的範例是這樣： @supports selector(:has(p)) { .card-thumb { aspect-ratio: 1; } } 在瀏覽器支援 :has(p) 的情況下才指定裡面的 CSS。 翻了一下 @support 在各家瀏覽器上實做的情況：在 Firefox 上是 69 開始支援，推出的日期是 2019/09/03。在 Chrome 上是 83 開始支援，推出的日期是 2020/05/19。在 Safari 上是 14.1 開始支援 (對應到 iOS 版本是 14.5)，推出的日期是 2021/04/26。 從日期可以看出來算是比較新的功能，但主要幾個大的瀏覽器都支援了。 這個讓我想起來早期利用各家瀏覽器的…
January 17, 2023In "Browser"
Leave a Reply
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Notify me of follow-up comments by email.
Notify me of new posts by email.
To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)
Post navigation
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK