惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Attack and Defense Labs
Attack and Defense Labs
N
News and Events Feed by Topic
L
LINUX DO - 热门话题
PCI Perspectives
PCI Perspectives
www.infosecurity-magazine.com
www.infosecurity-magazine.com
爱范儿
爱范儿
D
DataBreaches.Net
Simon Willison's Weblog
Simon Willison's Weblog
S
Secure Thoughts
S
SegmentFault 最新的问题
博客园 - 【当耐特】
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 叶小钗
P
Proofpoint News Feed
The Hacker News
The Hacker News
T
ThreatConnect
N
News and Events Feed by Topic
T
Threatpost
The Register - Security
The Register - Security
WordPress大学
WordPress大学
博客园 - Franky
Recorded Future
Recorded Future
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Project Zero
Project Zero
大猫的无限游戏
大猫的无限游戏
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
罗磊的独立博客
Stack Overflow Blog
Stack Overflow Blog
腾讯CDC
F
Future of Privacy Forum
F
Full Disclosure
Cyberwarzone
Cyberwarzone
J
Java Code Geeks
李成银的技术随笔
Schneier on Security
Schneier on Security
Know Your Adversary
Know Your Adversary
H
Hacker News: Front Page
人人都是产品经理
人人都是产品经理
博客园_首页
Scott Helme
Scott Helme
Google DeepMind News
Google DeepMind News
美团技术团队
Malwarebytes
Malwarebytes
Last Week in AI
Last Week in AI
T
Tailwind CSS Blog
T
The Exploit Database - CXSecurity.com
G
GRAHAM CLULEY
Recent Announcements
Recent Announcements
C
CXSECURITY Database RSS Feed - CXSecurity.com

CSS-Tricks

Revealing Text With CSS letter-spacing | CSS-Tricks Technical Writing in the AI Age | CSS-Tricks Cross-Document View Transitions: Scaling Across Hundreds of Elements | CSS-Tricks Cross-Document View Transitions: Scaling Across Hundreds of Elements | CSS-Tricks The State of CSS Centering in 2026 | CSS-Tricks Stack Overflow: When We Stop Asking | CSS-Tricks Cross-Document View Transitions: The Gotchas Nobody Mentions | CSS-Tricks What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More | CSS-Tricks Computing and Displaying Discounted Prices in CSS | CSS-Tricks rotateX() | CSS-Tricks rotateY() | CSS-Tricks rotateZ() | CSS-Tricks rotate() | CSS-Tricks Soon We Can Finally Banish JavaScript to the ShadowRealm | CSS-Tricks Using CSS corner-shape For Folded Corners | CSS-Tricks A Scrollytelling Gift for Mum on Mother’s Day 2026 | CSS-Tricks Google’s Prompt API | CSS-Tricks Making Zigzag CSS Layouts With a Grid + Transform Trick | CSS-Tricks Fixed-Height Cards: More Fragile Than They Look | CSS-Tricks What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More | CSS-Tricks The Importance of Native Randomness in CSS | CSS-Tricks contrast() | CSS-Tricks contrast-color() | CSS-Tricks Let’s Use the Nonexistent ::nth-letter Selector Now | CSS-Tricks Quick Hit #126 Recreating Apple’s Vision Pro Animation in CSS | CSS-Tricks Quick Hit #125 Enhancing Astro With a Markdown Component | CSS-Tricks Quick Hit #124 Markdown + Astro = ❤️ | CSS-Tricks Quick Hit #123 What’s !important #9: clip-path Jigsaws, View Transitions Toolkit, Name-only Containers, and More | CSS-Tricks A Well-Designed JavaScript Module System is Your First Architecture Decision | CSS-Tricks hypot() | CSS-Tricks The Radio State Machine | CSS-Tricks 7 View Transitions Recipes to Try | CSS-Tricks Quick Hit #122 Quick Hit #121 Selecting a Date Range in CSS | CSS-Tricks saturate() | CSS-Tricks justify-self | CSS-Tricks Quick Hit #120 Alternatives to the !important Keyword | CSS-Tricks Quick Hit #119 New CSS Multi-Column Layout Features in Chrome | CSS-Tricks Quick Hit #118 Making Complex CSS Shapes Using shape() | CSS-Tricks Quick Hit #117 Front-End Fools: Top 10 April Fools’ UI Pranks of All Time | CSS-Tricks Sniffing Out the CSS Olfactive API | CSS-Tricks What’s !important #8: Light/Dark Favicons, @mixin, object-view-box, and More | CSS-Tricks Quick Hit #116 Form Automation Tips for Happier User and Clients | CSS-Tricks Quick Hit #115 Generative UI Notes | CSS-Tricks Quick Hit #114 Quick Hit #113 Experimenting With Scroll-Driven corner-shape Animations | CSS-Tricks Quick Hit #112 JavaScript for Everyone: Destructuring | CSS-Tricks Quick Hit #111 Quick Hit #110 What’s !important #7: random(), Folded Corners, Anchored Container Queries, and More | CSS-Tricks 4 Reasons That Make Tailwind Great for Building Layouts | CSS-Tricks Quick Hit #109 Quick Hit #108 Abusing Customizable Selects | CSS-Tricks Quick Hit #107 The Value of z-index | CSS-Tricks Quick Hit #106 The Different Ways to Select <html> in CSS Quick Hit #105 Popover API or Dialog API: Which to Choose? Quick Hit #104 What’s !important #6: :heading, border-shape, Truncating Text From the Middle, and More Yet Another Way to Center an (Absolute) Element An Exploit ... in CSS?! Quick Hit #103 A Complete Guide to Bookmarklets Quick Hit #102 Loading Smarter: SVG vs. Raster Loaders in Modern Web Design Potentially Coming to a Browser :near() You Quick Hit #101 Distinguishing "Components" and "Utilities" in Tailwind Quick Hit #100 Spiral Scrollytelling in CSS With sibling-index() Interop 2026 Quick Hit #99 What’s !important #5: Lazy-loading iframes, Repeating corner-shape Backgrounds, and More Quick Hit #98 Making a Responsive Pyramidal Grid With Modern CSS Approximating contrast-color() With Other CSS Features Quick Hit #97 Trying to Make the Perfect Pie Chart in CSS Quick Hit #96 Quick Hit #95 CSS Bar Charts Using Modern Functions Quick Hit #94 No Hassle Visual Code Theming: Publishing an Extension Quick Hit #93
The Browser Statistics That Matter
CSS-Tricks · 2017-07-27 · via CSS-Tricks

Have you ever had a web development related conversation discussion where someone brought up global browser usage statistics? I might be a little weird, but I’d say I at least overhear a conversation like just about every day:

I’d love to use FANCY NEW FEATURE, but it’s not supported SOME BROWSER (probably old Internet Explorer) and GLOBAL MARKET SHARE of it is still 7.62%

Good on ya for considering the spectrum of browser usage on your web site. But there is a bit of a logic breakdown here. The global market share of any particular browser is irrelevant to whether you can use a feature or not. The browser statistics that matter are the browser usage statics of your web site, and nobody else’s.

There is quite a bit of variance

The reason you can’t use global statistics as a stand-in for your own is that they could be wildly wrong. Even keeping a wide-angle lens here, different continents (and even countries) have different breakdowns in usage. Zoom in a little and different industries and markets have different breakdowns. Zoom all the way in and your website will have browser usage statistics totally unique to you.

Sites like StatCounter that track the worldwide browser market are fascinating, but I’d argue largely exist as dinner party talk.

I’ve talked with plenty of folks who design for intranets where the browser usage is very specific because of the computers that the company provides to employees. Just recently, I heard of one with over 50% IE 11 use. The global statistic of 3.71% is irrelevant to them.

I’ve talked with folks who have sites so hugely skewed to mobile it’s their obvious top priority. On CSS-Tricks, I see about 6% on mobile, which has been that or less since mobile was a thing. I’d say it’s OK if we have a little different of priorities based on our individual data sets.

What if you don’t have the data?

Google Analytics is free. Slap it on the site for a few days. That’s enough to get a good idea of what’s going on.

If the site doesn’t exist yet, make educated guesses, and adjust as you go. You could probably ask around from folks who work on sites with some similarity to your new one.

Remember, there is always some degree of chicken-or-egg. If you build an excellent mobile website, you’ll see higher mobile traffic. Some people see increasing mobile traffic and then build a better mobile website to accommodate. Which came first? There is no obvious answer.

And so…

  • If you’re working on a project that has a large IE 10 user base, then support the heck out of IE 10. That’s your job.
  • If you’re working on a project with a lot of traffic from the UC Browser, you should support the heck out of the UC browser. That’s your job.
  • If you’re working on a project that has 0.0001% of traffic from Safari 3, you should drop support for Safari 3 and stop your team from spending any time on it. That’s your job.
  • It’s also your job to consider trend lines. If there is a new browser that is on the up and up, that makes more sense to support than and old browser on the decline.

Progressive enhancement factors in here

We should be careful not to conflate “support” with “is exactly the same everywhere”. The principle of progressive enhancement is about building from a baseline set of functionality (and aesthetic, you could argue) and layering on functionality as browsers support it. That way even if you drop support for a particular browser, it doesn’t mean nothing works there, it just means their experience is different. Probably worse, to be fair, but usable.

It’s tricky though. Say a ticket comes in for a browser you’re not explicitly supporting. Something is broken in an older browser, even though you’re largely using progressive enhancement techniques. Do you fix it? That’s up to you, but there is always a nahhhhhhh line.

Helpful tooling

I don’t know of any tool as good as Google Analytics for collecting and looking at browser usage statistics. The default implementations are all JavaScript-based, so if you’re concerned about skewed data in that regard, you might want to web search around for “Google Analytics without JavaScript” as it seems possible.

Here’s a month of data from CSS-Tricks.

Of course, the data above is useful to nobody but me and people who work on CSS-Tricks.

The amazing browser support website Can I use allows you to import data directly from Google Analytics. That way when you’re looking at support percentages, it’s based on your own data (hip, hip, hooray!).

There are other tools out there that make use of browser usage statistics to make decisions. For example, the popular tool Autoprefixer processes CSS adding prefixes and alternate properties when necessary to support the range of browsers asked for. Babel, the popular tool for processing JavaScript into a format older browsers can use, can be configured to a certain set of browsers.

Fortunately, there is an effort to reign in how these tools are configured called Browserslist, which you can read about here.

It’s all a dance

Clearly I’m advocating for making discussions based on your own site’s browser usage data. And on the flip side, attempting to stop conversations that try to use global usage as an indicator for your choices.

But, of course, real-world development is always a dance of business requirements, making people happy, developer skill and convenience, and available tooling. You might go deeper with support (than the data shows is necessary) because it’s part of your brand or it wasn’t that hard to do. You might lean more modern and shallow with support (than the data shows is necessary) because of your progressive enhancement base, , and a stakeholder on a super old browser.

Dance on.