Member Avatar for M@S00M

can i use targetted css for browser compatibility?

Edited by Dani because: Formatting fixed
  • 3 Contributors
  • 2 Replies
  • 99 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Short answer: targeted CSS is possible, but avoid relying on user-agent sniffing. As asked about browser compatibility, pointed out maintenance problems with UA-targeting and noted responsive stylesheets are acceptable—both points are useful. Prefer feature detection and progressive enhancement so the site has a simple baseline and enhanced rules only where a browser actually supports the feature.

Example pattern using CSS feature queries (apply advanced layout only when supported):

@supports (display: grid) {
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@supports not (display: grid) {
.cards { display: flex; flex-wrap: wrap; }
}

Practical workflow:

  • Author a solid, simple baseline stylesheet that works everywhere.
  • Layer enhancements with @supports or server-generated classes (Modernizr) so styles target capability rather than UA.
  • Run Autoprefixer (build step) to handle vendor prefixes automatically.
  • Consult feature support (Can I Use) before relying on a feature; add small polyfills only when necessary.
  • Keep any browser-specific corrections isolated and documented so they can be removed later.

Useful references: MDN @supports, Modernizr, Autoprefixer (PostCSS), Can I Use.

Notes and cautions: UA-based hacks are brittle and increase long-term cost. Conditional comments or legacy-only stylesheets are acceptable only for narrowly scoped, well-documented fixes targeting old Internet Explorer versions; otherwise prefer the feature-detection approach above.

Recommended Answers

All 2 Replies

Member Avatar for rtrethewey

There are ways to apply selected stylesheets depending on the browser (user-agent), but it's something you should avoid because it can be very difficult to maintain over time. Generally, the only exceptions are supporting older versions of Internet Explorer which can be handled with conditional comments.

What are the problems you need to solve with targeting your css?

Member Avatar for Dani

It's okay to use different CSS stylesheets to create a responsive layout that works across mobile browsers as well as desktops. Just be careful to avoid cloaking techniques, such as serving different content to Googlebot than to real visitors.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.