Member Avatar for Ritesh_4

Hello, is it do-able to write something like the below in a css file if I want to apply different styles based on the browser loading the css file? Currently I have a website which is rendered correctly in FF and Chrome, but nor in IE 8 (and prev. versions), although in IE9 it is ok.

If IE  
#container { top: 5px; }  

If Mozilla 
#container { top: 7px; }    

If Chrome  
#container { top: 9px; }
  • 5 Contributors
  • 5 Replies
  • 197 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

You can't write browser-name conditionals inside plain CSS. That explains your observation, . There are, however, practical and more maintainable alternatives to the brittle browser-sniffing hacks:

  • Prefer feature-detection and progressive enhancement instead of targeting browsers. Use CSS feature queries (@supports) to apply modern rules where supported and leave a safe fallback for older engines. This keeps behavior consistent and future-proof.
  • If you must support legacy IE, 's conditional-comment direction is one of the few reliable IE-only options — note those comments only apply to older IE versions (they're not supported in later IE/Edge). Use them sparingly.
  • Avoid user-agent sniffing in JavaScript when possible. As suggested, JS can add classes to the document root for conditional styling, but a feature-first approach (Modernizr or native @supports) is usually cleaner and less fragile.
  • Small differences across browsers often come from DOCTYPE, default styles, box model, fonts, or sub-pixel rounding. Before adding browser-specific rules, verify the computed box sizes and inherited line-height/ font in each browser.

A simple feature-query pattern:

/* baseline (fallback first) */
#container { position: relative; top: 8px; }

/* where the browser supports flexbox, switch to flow-based layout */
@supports (display: flex) {
  #container { position: static; top: auto; display: flex; align-items: center; }
}

Quick debug checklist:

  • Ensure a standards DOCTYPE and consistent font-family/line-height.
  • Use a reset/normalize and box-sizing: border-box.
  • Inspect computed styles in each browser (DevTools).
  • Replace fragile top offsets with flow/layout methods (margin, flex, grid) where possible.

Combine these steps with targeted legacy fallbacks only when necessary. This minimizes browser-specific tweaks and gives a more robust, long-term solution.

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

I havent had the need to do this exactly in this manner you are describing, but the way I would go about this using javascript to determine the type of browser the user is using, then apply the appropriate styles via javascript as well.

Member Avatar for BMXDad

No ... but you could use css hacks. If your looking for diffent style sheets for each browser, then a conditional on the link is better ... IMO

<!--[if lt IE 7]> <link rel="stylesheet" href="Content/IE7.min.css" /> <![endif]-->

But before doing that, you might want to see if you can solve the problem either with diffent css or with some minor ie spacing hacks.

This should work for all IE (pretty sure it still does). Just duplicate a class for IE

html>body someClass {
Something for IE here: 30em
}
Member Avatar for EvolutionFallen

You cannot do this in a raw CSS file -- this is why CSS hacks exist (which I try to avoid).

You can use IE conditional comments if you want to target IE specifically. I like for explaining usage.

Lastly, you can use your server-side language or JavaScript to detect and link the correct CSS file, as JorgeM suggested.

Member Avatar for JorgeM

I didn't recommend the IE conditional statements because lordrt needs to target non-IE browsers as well. The conditional statements can't be used for specific non-IE browsers.

If you want to target all non IE browsers as a whole, you can still use conditional comments.

Member Avatar for almostbob

perhaps an em or fractional em(.9em) could/would/should self adjust to browser metrics, user preference, something like

#container {top: 0.7em;}
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.