[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fcss-combo-for-a11y-performance-and-browser-support":3},{"id":4,"title":5,"body":6,"date":135,"description":136,"extension":137,"head":138,"imageUrl":89,"meta":139,"navigation":140,"ogImage":138,"path":141,"robots":138,"schemaOrg":138,"seo":142,"sitemap":143,"stem":144,"__hash__":145},"articles\u002Farticles\u002F15.CSS-combo-for-a11y-performance-and-browser-support.md","CSS Combo for a11y, performance and browser support",{"type":7,"value":8,"toc":132},"minimark",[9,13,17,20,28,31,67,70,84,97,100,109,119,129],[10,11,5],"h1",{"id":12},"css-combo-for-a11y-performance-and-browser-support",[14,15,16],"p",{},"This CSS combo does something most developers skip.",[14,18,19],{},"It handles accessibility, performance, and browser support at once.",[14,21,22,23,27],{},"Take ",[24,25,26],"strong",{},"backdrop-filter"," as an example. Users might not want fancy liquid glass effects. Also, backdrop-filter heavily consumes GPU resources because it requires real-time processing of every frame.",[14,29,30],{},"What you need to know:",[32,33,34,45,58],"ol",{},[35,36,37,38,44],"li",{},"There is ",[24,39,40],{},[41,42,43],"code",{},"prefers-reduced-transparency"," media query, indicating whether users have disabled transparency effects in their OS. It has 72.57% global support, not universal, but growing.",[35,46,47,51,52,57],{},[24,48,49],{},[41,50,26],{}," has around 95% browser support. With ",[24,53,54],{},[41,55,56],{},"@supports (backdrop-filter: blur(1px))"," you can check whether it is supported or not.",[35,59,60,61,66],{},"With ",[24,62,63],{},[41,64,65],{},"@media (hover: hover) and (pointer: fine)"," you can check if we are on a desktop device.",[14,68,69],{},"What you can achieve:",[32,71,72,75,78,81],{},[35,73,74],{},"Have a default behavior for something, for example a header with a semi-transparent background.",[35,76,77],{},"If backdrop-filter is supported then you can apply it.",[35,79,80],{},"Apply it only for desktop devices to reduce resource consumption.",[35,82,83],{},"If users do not want it, you can disable it for any kind of device.",[85,86,90],"v-image",{":hasBorder":87,":rounded":87,"alt":88,"src":89},"true","CSS combo for accessibility, performance, and browser support","\u002Fimg\u002Fcss-combo\u002Fbackdrop-combo.png",[91,92,94],"template",{"v-slot:description":93},"",[14,95,96],{},"CSS combo example for accessibility, performance, and browser support",[14,98,99],{},"You can also flip it around if you want blur only on mobile.",[85,101,104],{":hasBorder":87,":rounded":87,"alt":102,"src":103},"Mobile-first backdrop blur example","\u002Fimg\u002Fcss-combo\u002Fmobile-blur-example.png",[91,105,106],{"v-slot:description":93},[14,107,108],{},"An example where blur is applied only on mobile",[14,110,111,112,114,115,118],{},"If ",[41,113,65],{}," checks that it is a desktop device, then ",[41,116,117],{},"(hover: none) and (pointer: coarse)"," checks that it is not a desktop device. It is not 100% accurate, but works well in practice.",[14,120,121,122],{},"P.S. Need some help on UI\u002FUX side? Here is how I can help: ",[123,124,128],"a",{"href":125,"rel":126},"https:\u002F\u002Fvpon.me\u002Fconsulting",[127],"nofollow","vpon.me\u002Fconsulting",[14,130,131],{},"Have a nice week.",{"title":93,"searchDepth":133,"depth":133,"links":134},2,[],"2026-02-24T03:39:55+04:00","Practical CSS combination for balancing accessibility preferences, browser support, and performance when using backdrop-filter.\n","md",null,{},true,"\u002Farticles\u002Fcss-combo-for-a11y-performance-and-browser-support",{"title":5,"description":136},{"loc":141},"articles\u002F15.CSS-combo-for-a11y-performance-and-browser-support","WfCy_Vb775bE2pjUQD6QhhDlqaUbTNNDr2_UBTLdU3w"]