[{"data":1,"prerenderedAt":1042},["ShallowReactive",2],{"page-\u002Fcss\u002F20-browser-compatibility":3},{"id":4,"title":5,"body":6,"description":1035,"extension":1036,"meta":1037,"navigation":291,"path":1038,"seo":1039,"stem":1040,"__hash__":1041},"content\u002Fcss\u002F20-browser-compatibility.md","20 — Browser Compatibility: Prefixes, @supports & Progressive Enhancement",{"type":7,"value":8,"toc":1023},"minimark",[9,13,26,31,86,240,246,501,505,610,614,619,683,754,763,767,833,837,928,932,994,1019],[10,11,5],"h1",{"id":12},"_20-browser-compatibility-prefixes-supports-progressive-enhancement",[14,15,16,17,21,22,25],"p",{},"Vendor prefixes are mostly obsolete. The production approach: Autoprefixer (driven by ",[18,19,20],"code",{},"browserslist",") adds the few remaining prefixes; ",[18,23,24],{},"@supports"," for feature detection; fallbacks before new properties. Safari (WebKit) is the laggard — test it specifically.",[27,28,30],"h2",{"id":29},"vendor-prefixes-let-tooling-handle-them","Vendor Prefixes — let tooling handle them",[32,33,35],"code-wrapper",{"language":34},"json",[36,37,41],"pre",{"className":38,"code":39,"language":34,"meta":40,"style":40},"language-json shiki shiki-themes github-light github-dark","{\n  \"browserslist\": [\"last 2 versions\", \"> 1%\", \"not dead\"]\n}\n","",[18,42,43,52,80],{"__ignoreMap":40},[44,45,48],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"ssxIu","{\n",[44,53,55,59,62,66,69,72,74,77],{"class":46,"line":54},2,[44,56,58],{"class":57},"snvgF","  \"browserslist\"",[44,60,61],{"class":50},": [",[44,63,65],{"class":64},"sJ6F3","\"last 2 versions\"",[44,67,68],{"class":50},", ",[44,70,71],{"class":64},"\"> 1%\"",[44,73,68],{"class":50},[44,75,76],{"class":64},"\"not dead\"",[44,78,79],{"class":50},"]\n",[44,81,83],{"class":46,"line":82},3,[44,84,85],{"class":50},"}\n",[32,87,89],{"language":88},"css",[36,90,93],{"className":91,"code":92,"language":88,"meta":40,"style":40},"language-css shiki shiki-themes github-light github-dark","\u002F* Don't hand-write prefixes. Autoprefixer reads browserslist and adds only what's needed. *\u002F\n\u002F* The few properties still needing -webkit- for Safari (2024): *\u002F\n.glass {\n  -webkit-backdrop-filter: blur(10px);  \u002F* Safari *\u002F\n  backdrop-filter: blur(10px);          \u002F* standard *\u002F\n}\n.gradient-text {\n  -webkit-background-clip: text;        \u002F* Safari *\u002F\n  background-clip: text;\n  -webkit-text-fill-color: transparent; \u002F* Safari *\u002F\n  color: transparent;\n}\n",[18,94,95,101,106,115,143,165,170,178,194,207,223,235],{"__ignoreMap":40},[44,96,97],{"class":46,"line":47},[44,98,100],{"class":99},"sdCPZ","\u002F* Don't hand-write prefixes. Autoprefixer reads browserslist and adds only what's needed. *\u002F\n",[44,102,103],{"class":46,"line":54},[44,104,105],{"class":99},"\u002F* The few properties still needing -webkit- for Safari (2024): *\u002F\n",[44,107,108,112],{"class":46,"line":82},[44,109,111],{"class":110},"sIsaT",".glass",[44,113,114],{"class":50}," {\n",[44,116,118,121,124,127,130,133,137,140],{"class":46,"line":117},4,[44,119,120],{"class":57},"  -webkit-backdrop-filter",[44,122,123],{"class":50},": ",[44,125,126],{"class":57},"blur",[44,128,129],{"class":50},"(",[44,131,132],{"class":57},"10",[44,134,136],{"class":135},"svdQ7","px",[44,138,139],{"class":50},");  ",[44,141,142],{"class":99},"\u002F* Safari *\u002F\n",[44,144,146,149,151,153,155,157,159,162],{"class":46,"line":145},5,[44,147,148],{"class":57},"  backdrop-filter",[44,150,123],{"class":50},[44,152,126],{"class":57},[44,154,129],{"class":50},[44,156,132],{"class":57},[44,158,136],{"class":135},[44,160,161],{"class":50},");          ",[44,163,164],{"class":99},"\u002F* standard *\u002F\n",[44,166,168],{"class":46,"line":167},6,[44,169,85],{"class":50},[44,171,173,176],{"class":46,"line":172},7,[44,174,175],{"class":110},".gradient-text",[44,177,114],{"class":50},[44,179,181,184,186,189,192],{"class":46,"line":180},8,[44,182,183],{"class":57},"  -webkit-background-clip",[44,185,123],{"class":50},[44,187,188],{"class":57},"text",[44,190,191],{"class":50},";        ",[44,193,142],{"class":99},[44,195,197,200,202,204],{"class":46,"line":196},9,[44,198,199],{"class":57},"  background-clip",[44,201,123],{"class":50},[44,203,188],{"class":57},[44,205,206],{"class":50},";\n",[44,208,210,213,215,218,221],{"class":46,"line":209},10,[44,211,212],{"class":57},"  -webkit-text-fill-color",[44,214,123],{"class":50},[44,216,217],{"class":57},"transparent",[44,219,220],{"class":50},"; ",[44,222,142],{"class":99},[44,224,226,229,231,233],{"class":46,"line":225},11,[44,227,228],{"class":57},"  color",[44,230,123],{"class":50},[44,232,217],{"class":57},[44,234,206],{"class":50},[44,236,238],{"class":46,"line":237},12,[44,239,85],{"class":50},[27,241,243,245],{"id":242},"supports-feature-detection-not-ua-sniffing",[18,244,24],{}," — feature detection (not UA sniffing)",[32,247,248],{"language":88},[36,249,251],{"className":91,"code":250,"language":88,"meta":40,"style":40},"\u002F* Fallback for ALL browsers (including those without @support) *\u002F\n.card { display: flex; flex-direction: column; }\n\n\u002F* Enhanced if grid is supported. IE doesn't support @supports → gets the fallback. *\u002F\n@supports (display: grid) {\n  .card { display: grid; grid-template-columns: 1fr 2fr; }\n}\n\n\u002F* Negation: browsers WITHOUT the feature *\u002F\n@supports not (display: grid) { .card { display: block; } }\n\n\u002F* Selector support detection *\u002F\n@supports selector(:has(> *)) { .card:has(img) { padding-block-start: 0; } }\n\n\u002F* Combine with and\u002For *\u002F\n@supports (display: grid) and (gap: 1rem) { .grid { display: grid; gap: 1rem; } }\n",[18,252,253,258,287,293,298,315,348,352,356,361,393,397,402,434,439,445],{"__ignoreMap":40},[44,254,255],{"class":46,"line":47},[44,256,257],{"class":99},"\u002F* Fallback for ALL browsers (including those without @support) *\u002F\n",[44,259,260,263,266,269,271,274,276,279,281,284],{"class":46,"line":54},[44,261,262],{"class":110},".card",[44,264,265],{"class":50}," { ",[44,267,268],{"class":57},"display",[44,270,123],{"class":50},[44,272,273],{"class":57},"flex",[44,275,220],{"class":50},[44,277,278],{"class":57},"flex-direction",[44,280,123],{"class":50},[44,282,283],{"class":57},"column",[44,285,286],{"class":50},"; }\n",[44,288,289],{"class":46,"line":82},[44,290,292],{"emptyLinePlaceholder":291},true,"\n",[44,294,295],{"class":46,"line":117},[44,296,297],{"class":99},"\u002F* Enhanced if grid is supported. IE doesn't support @supports → gets the fallback. *\u002F\n",[44,299,300,302,305,307,309,312],{"class":46,"line":145},[44,301,24],{"class":135},[44,303,304],{"class":50}," (",[44,306,268],{"class":57},[44,308,123],{"class":50},[44,310,311],{"class":57},"grid",[44,313,314],{"class":50},") {\n",[44,316,317,320,322,324,326,328,330,333,335,338,341,344,346],{"class":46,"line":167},[44,318,319],{"class":110},"  .card",[44,321,265],{"class":50},[44,323,268],{"class":57},[44,325,123],{"class":50},[44,327,311],{"class":57},[44,329,220],{"class":50},[44,331,332],{"class":57},"grid-template-columns",[44,334,123],{"class":50},[44,336,337],{"class":57},"1",[44,339,340],{"class":135},"fr",[44,342,343],{"class":57}," 2",[44,345,340],{"class":135},[44,347,286],{"class":50},[44,349,350],{"class":46,"line":172},[44,351,85],{"class":50},[44,353,354],{"class":46,"line":180},[44,355,292],{"emptyLinePlaceholder":291},[44,357,358],{"class":46,"line":196},[44,359,360],{"class":99},"\u002F* Negation: browsers WITHOUT the feature *\u002F\n",[44,362,363,365,368,370,372,374,376,379,381,383,385,387,390],{"class":46,"line":209},[44,364,24],{"class":135},[44,366,367],{"class":135}," not",[44,369,304],{"class":50},[44,371,268],{"class":57},[44,373,123],{"class":50},[44,375,311],{"class":57},[44,377,378],{"class":50},") { ",[44,380,262],{"class":110},[44,382,265],{"class":50},[44,384,268],{"class":57},[44,386,123],{"class":50},[44,388,389],{"class":57},"block",[44,391,392],{"class":50},"; } }\n",[44,394,395],{"class":46,"line":225},[44,396,292],{"emptyLinePlaceholder":291},[44,398,399],{"class":46,"line":237},[44,400,401],{"class":99},"\u002F* Selector support detection *\u002F\n",[44,403,405,407,410,413,416,418,422,424,427,429,432],{"class":46,"line":404},13,[44,406,24],{"class":135},[44,408,409],{"class":57}," selector",[44,411,412],{"class":50},"(:has(> *)) { ",[44,414,415],{"class":110},".card:has",[44,417,129],{"class":50},[44,419,421],{"class":420},"sk71V","img",[44,423,378],{"class":50},[44,425,426],{"class":57},"padding-block-start",[44,428,123],{"class":50},[44,430,431],{"class":57},"0",[44,433,392],{"class":50},[44,435,437],{"class":46,"line":436},14,[44,438,292],{"emptyLinePlaceholder":291},[44,440,442],{"class":46,"line":441},15,[44,443,444],{"class":99},"\u002F* Combine with and\u002For *\u002F\n",[44,446,448,450,452,454,456,458,461,464,466,469,471,473,476,478,481,483,485,487,489,491,493,495,497,499],{"class":46,"line":447},16,[44,449,24],{"class":135},[44,451,304],{"class":50},[44,453,268],{"class":57},[44,455,123],{"class":50},[44,457,311],{"class":57},[44,459,460],{"class":50},") ",[44,462,463],{"class":135},"and",[44,465,304],{"class":50},[44,467,468],{"class":57},"gap",[44,470,123],{"class":50},[44,472,337],{"class":57},[44,474,475],{"class":135},"rem",[44,477,378],{"class":50},[44,479,480],{"class":110},".grid",[44,482,265],{"class":50},[44,484,268],{"class":57},[44,486,123],{"class":50},[44,488,311],{"class":57},[44,490,220],{"class":50},[44,492,468],{"class":57},[44,494,123],{"class":50},[44,496,337],{"class":57},[44,498,475],{"class":135},[44,500,392],{"class":50},[27,502,504],{"id":503},"property-fallbacks-fallback-before-the-new-property","Property Fallbacks — fallback BEFORE the new property",[32,506,507],{"language":88},[36,508,510],{"className":91,"code":509,"language":88,"meta":40,"style":40},".box {\n  width: 300px;          \u002F* fallback — applies if the next line is unsupported *\u002F\n  display: block;         \u002F* fallback *\u002F\n  display: grid;          \u002F* enhanced — if unsupported, ignored, fallback stays *\u002F\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n}\n\u002F* The cascade: the last SUPPORTED value wins. Unsupported values are ignored, not errors. *\u002F\n",[18,511,512,519,537,552,565,601,605],{"__ignoreMap":40},[44,513,514,517],{"class":46,"line":47},[44,515,516],{"class":110},".box",[44,518,114],{"class":50},[44,520,521,524,526,529,531,534],{"class":46,"line":54},[44,522,523],{"class":57},"  width",[44,525,123],{"class":50},[44,527,528],{"class":57},"300",[44,530,136],{"class":135},[44,532,533],{"class":50},";          ",[44,535,536],{"class":99},"\u002F* fallback — applies if the next line is unsupported *\u002F\n",[44,538,539,542,544,546,549],{"class":46,"line":82},[44,540,541],{"class":57},"  display",[44,543,123],{"class":50},[44,545,389],{"class":57},[44,547,548],{"class":50},";         ",[44,550,551],{"class":99},"\u002F* fallback *\u002F\n",[44,553,554,556,558,560,562],{"class":46,"line":117},[44,555,541],{"class":57},[44,557,123],{"class":50},[44,559,311],{"class":57},[44,561,533],{"class":50},[44,563,564],{"class":99},"\u002F* enhanced — if unsupported, ignored, fallback stays *\u002F\n",[44,566,567,570,572,575,577,580,582,585,587,590,592,594,596,598],{"class":46,"line":145},[44,568,569],{"class":57},"  grid-template-columns",[44,571,123],{"class":50},[44,573,574],{"class":57},"repeat",[44,576,129],{"class":50},[44,578,579],{"class":57},"auto-fill",[44,581,68],{"class":50},[44,583,584],{"class":57},"minmax",[44,586,129],{"class":50},[44,588,589],{"class":57},"250",[44,591,136],{"class":135},[44,593,68],{"class":50},[44,595,337],{"class":57},[44,597,340],{"class":135},[44,599,600],{"class":50},"));\n",[44,602,603],{"class":46,"line":167},[44,604,85],{"class":50},[44,606,607],{"class":46,"line":172},[44,608,609],{"class":99},"\u002F* The cascade: the last SUPPORTED value wins. Unsupported values are ignored, not errors. *\u002F\n",[27,611,613],{"id":612},"the-safari-laggard-trap","The Safari Laggard Trap",[615,616,618],"h3",{"id":617},"anti-pattern-missing-webkit-prefix-breaks-safari","Anti-pattern: missing -webkit- prefix breaks Safari",[32,620,621],{"language":88},[36,622,624],{"className":91,"code":623,"language":88,"meta":40,"style":40},"\u002F* ❌ backdrop-filter without -webkit- → Safari (versions needing the prefix) shows no blur. *\u002F\n.glass { background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); }\n",[18,625,626,631],{"__ignoreMap":40},[44,627,628],{"class":46,"line":47},[44,629,630],{"class":99},"\u002F* ❌ backdrop-filter without -webkit- → Safari (versions needing the prefix) shows no blur. *\u002F\n",[44,632,633,635,637,640,642,645,647,650,653,655,657,659,661,664,667,670,672,674,676,678,680],{"class":46,"line":54},[44,634,111],{"class":110},[44,636,265],{"class":50},[44,638,639],{"class":57},"background",[44,641,123],{"class":50},[44,643,644],{"class":57},"rgba",[44,646,129],{"class":50},[44,648,649],{"class":57},"255",[44,651,652],{"class":50},",",[44,654,649],{"class":57},[44,656,652],{"class":50},[44,658,649],{"class":57},[44,660,652],{"class":50},[44,662,663],{"class":57},"0.2",[44,665,666],{"class":50},"); ",[44,668,669],{"class":57},"backdrop-filter",[44,671,123],{"class":50},[44,673,126],{"class":57},[44,675,129],{"class":50},[44,677,132],{"class":57},[44,679,136],{"class":135},[44,681,682],{"class":50},"); }\n",[32,684,685],{"language":88},[36,686,688],{"className":91,"code":687,"language":88,"meta":40,"style":40},"\u002F* ✓ Include -webkit- (before standard, so the standard wins when supported). Or use Autoprefixer. *\u002F\n.glass { background: rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }\n",[18,689,690,695],{"__ignoreMap":40},[44,691,692],{"class":46,"line":47},[44,693,694],{"class":99},"\u002F* ✓ Include -webkit- (before standard, so the standard wins when supported). Or use Autoprefixer. *\u002F\n",[44,696,697,699,701,703,705,707,709,711,713,715,717,719,721,723,725,728,730,732,734,736,738,740,742,744,746,748,750,752],{"class":46,"line":54},[44,698,111],{"class":110},[44,700,265],{"class":50},[44,702,639],{"class":57},[44,704,123],{"class":50},[44,706,644],{"class":57},[44,708,129],{"class":50},[44,710,649],{"class":57},[44,712,652],{"class":50},[44,714,649],{"class":57},[44,716,652],{"class":50},[44,718,649],{"class":57},[44,720,652],{"class":50},[44,722,663],{"class":57},[44,724,666],{"class":50},[44,726,727],{"class":57},"-webkit-backdrop-filter",[44,729,123],{"class":50},[44,731,126],{"class":57},[44,733,129],{"class":50},[44,735,132],{"class":57},[44,737,136],{"class":135},[44,739,666],{"class":50},[44,741,669],{"class":57},[44,743,123],{"class":50},[44,745,126],{"class":57},[44,747,129],{"class":50},[44,749,132],{"class":57},[44,751,136],{"class":135},[44,753,682],{"class":50},[32,755,756],{"language":188},[36,757,761],{"className":758,"code":760,"language":188,"meta":40},[759],"language-text","Safari is often the laggard for newer CSS:\n  :has()          → Safari 15.4 (Chrome 105)\n  container queries → Safari 16 (Chrome 105)\n  subgrid         → Safari 16 (Chrome 117)\n  backdrop-filter → needs -webkit- in older Safari\n  background-clip:text → needs -webkit- in Safari\nAlways check Safari support specifically on caniuse.com.\n",[18,762,760],{"__ignoreMap":40},[27,764,766],{"id":765},"tips-tricks","💡 Tips & Tricks",[768,769,770,785,798,815,828],"ul",{},[771,772,773,777,778,780,781,784],"li",{},[774,775,776],"strong",{},"Idiom",": Autoprefixer with ",[18,779,20],{}," (not hand-written prefixes) — configure your target (",[18,782,783],{},"last 2 versions, > 1%, not dead",") and let it add\u002Fremove prefixes. Hand-writing is error-prone and leaves obsolete ones.",[771,786,787,123,789,791,792,794,795,797],{},[774,788,776],{},[18,790,24],{}," for progressive enhancement — fallback for all, enhanced if supported. Better than UA sniffing (fragile). IE doesn't support ",[18,793,24],{}," → gets the fallback (outside ",[18,796,24],{},").",[771,799,800,802,803,807,808,811,812,814],{},[774,801,776],{},": fallbacks ",[804,805,806],"em",{},"before"," new properties — ",[18,809,810],{},"width: 300px; display: grid;",". If ",[18,813,311],{}," is unsupported, the browser ignores it and uses the earlier value. The cascade's \"last supported value wins\" handles fallbacks.",[771,816,817,819,820,827],{},[774,818,776],{},": check ",[821,822,826],"a",{"href":823,"rel":824},"https:\u002F\u002Fcaniuse.com",[825],"nofollow","caniuse.com"," before using a newer feature — shows support across browsers with version numbers and known issues.",[771,829,830,832],{},[774,831,776],{},": test in Safari (WebKit) — Chrome (Blink) and Safari (WebKit) differ. Safari is the laggard for newer CSS. Test both for cross-engine correctness.",[27,834,836],{"id":835},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[768,838,839,856,875,888,901,913],{},[771,840,841,844,845,848,849,852,853,855],{},[774,842,843],{},"Prefixes are mostly obsolete",": don't add ",[18,846,847],{},"-webkit-","\u002F",[18,850,851],{},"-moz-"," to everything — it clutters and some prefixed versions have bugs. Use Autoprefixer with a current ",[18,854,20],{},".",[771,857,858,863,864,867,868,870,871,874],{},[774,859,860,862],{},[18,861,24],{}," isn't supported in IE",": IE gets the CSS ",[804,865,866],{},"outside"," ",[18,869,24],{}," (the fallback), and the ",[18,872,873],{},"@supports (display: grid)"," block is ignored — usually what you want.",[771,876,877,123,880,883,884,887],{},[774,878,879],{},"Prefixed and unprefixed can differ",[18,881,882],{},"-webkit-background-clip: text"," and ",[18,885,886],{},"background-clip: text"," can have slightly different behavior in older WebKit. Test both.",[771,889,890,123,893,896,897,900],{},[774,891,892],{},"Feature detection isn't bug detection",[18,894,895],{},"@supports (gap: 1rem)"," checks if the browser ",[804,898,899],{},"claims"," support, not if it works correctly. Some features have partial\u002Fbuggy support (gap in flexbox was buggy in early Chrome).",[771,902,903,909,910,912],{},[774,904,905,906,908],{},"Forking by ",[18,907,24],{}," can bloat CSS",": too many ",[18,911,24],{}," branches make the CSS large. Use for major enhancements (grid vs flex), not every property.",[771,914,915,123,920,923,924,927],{},[774,916,917,919],{},[18,918,20],{}," affects Autoprefixer output",[18,921,922],{},"last 2 versions"," adds few prefixes; ",[18,925,926],{},"> 1%"," adds more for popular older browsers. Choose your target realistically.",[27,929,931],{"id":930},"spot-the-bug","🧠 Spot the Bug",[32,933,934],{"language":88},[36,935,937],{"className":91,"code":936,"language":88,"meta":40,"style":40},".glass {\n    background: rgba(255, 255, 255, 0.2);\n    backdrop-filter: blur(10px);\n}\n",[18,938,939,945,973,990],{"__ignoreMap":40},[44,940,941,943],{"class":46,"line":47},[44,942,111],{"class":110},[44,944,114],{"class":50},[44,946,947,950,952,954,956,958,960,962,964,966,968,970],{"class":46,"line":54},[44,948,949],{"class":57},"    background",[44,951,123],{"class":50},[44,953,644],{"class":57},[44,955,129],{"class":50},[44,957,649],{"class":57},[44,959,68],{"class":50},[44,961,649],{"class":57},[44,963,68],{"class":50},[44,965,649],{"class":57},[44,967,68],{"class":50},[44,969,663],{"class":57},[44,971,972],{"class":50},");\n",[44,974,975,978,980,982,984,986,988],{"class":46,"line":82},[44,976,977],{"class":57},"    backdrop-filter",[44,979,123],{"class":50},[44,981,126],{"class":57},[44,983,129],{"class":50},[44,985,132],{"class":57},[44,987,136],{"class":135},[44,989,972],{"class":50},[44,991,992],{"class":46,"line":117},[44,993,85],{"class":50},[995,996,997,1001],"details",{},[998,999,1000],"summary",{},"Answer",[14,1002,1003,1004,1006,1007,1009,1010,1012,1013,1015,1016,1018],{},"Safari (older versions, and some current contexts) requires ",[18,1005,727],{},". Without it, Safari ignores the unprefixed ",[18,1008,669],{}," → no blur, just a translucent panel. Fix: include the ",[18,1011,847],{}," prefix before the standard (so the standard wins when supported), or use Autoprefixer with a ",[18,1014,20],{}," that includes Safari. Some features (backdrop-filter, background-clip: text, mask) still need ",[18,1017,847],{}," in Safari even today.",[1020,1021,1022],"style",{},"html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}",{"title":40,"searchDepth":54,"depth":54,"links":1024},[1025,1026,1028,1029,1032,1033,1034],{"id":29,"depth":54,"text":30},{"id":242,"depth":54,"text":1027},"@supports — feature detection (not UA sniffing)",{"id":503,"depth":54,"text":504},{"id":612,"depth":54,"text":613,"children":1030},[1031],{"id":617,"depth":82,"text":618},{"id":765,"depth":54,"text":766},{"id":835,"depth":54,"text":836},{"id":930,"depth":54,"text":931},"Autoprefixer with browserslist, @supports feature detection, property fallback ordering, the Safari -webkit- laggard trap, and caniuse as the reference. Code-first reference for cross-engine production CSS.","md",{},"\u002Fcss\u002F20-browser-compatibility",{"title":5,"description":1035},"css\u002F20-browser-compatibility","hIwR6F_0upVCM_15eui7AIPRCrEqeB6gyQ8ftFfKdyg",1789924647573]