Code to use CSS for Safari and Chrome, but not for Firefox

Classic General
1

I think this is called browser specific code. What would the code look like to say use x CSS for Safari and Chrome but not for Firefox?

2

It’s not possible to differentiate between different browsers or versions with CSS alone.

You have media breakpoints that can call upon different blocks of code, depending on screen size:

@media sceen and (min-width: 568px) {
    /* Code for screens wider than 568px goes here */
}

And if you are using very new or experimental CSS properties, you might need to use browser prefixes on them, before all browsers would recognise the code:

.turnIntoColumns {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}

You also have libraries like Modernizer that can do something called feature detection. But this is really, really high-end level stuff that 99% of RapidWeaver users never need to touch ever.

And before anyone says “ah, just use PHP to get the user agent and read load the correct CSS” - take note that this is becoming ever more unreliable. Browser vendors have changed and merged user agents together. Apple Safari for iPad now registers as a Safari desktop instead of iPad. User agent detection has become a minefield.

What exactly is the CSS code you are having difficulty with? There’s possibly a better or easier way of doing what you want.

2 Likes
3

Thanks @willwood. I don’t think that will help me with my problem. The issue is still related to my glassware for sale site. @indridcold gave me CSS code to solve the height problems. All was looking good until yesterday when someone told me my site was not working in Firefox. Sure enough. I’ve been trying different things this morning to see if I can make it work, but this is beyond my kills. Here’s the CSS that @indridcold wrote:

li.filter-item {
position: inherit !important;
height: auto !important;
}
.filter-content {
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 2px solid rgba(64, 133, 153, 1.00);
}

Here’s my site, but keep in mind I am working on it and the CSS is removed at the moment:
https://www.kitchyglass.com

4

Do you want each item to have an ‘auto’ height? If so then try this slightly amended CSS code:

li.filter-item {
    position: static !important;
    height: auto !important;
}

.filter-content {
    padding-bottom: 1em;
    margin-bottom: 1em;
    border-bottom: 2px solid rgba(64, 133, 153, 1.00);
}

All I did here was to change position:inherit to position:static.

Static is just a slightly better way of telling a web browser you want no positioning applied to the element.

Inherit would otherwise take the ‘relative’ position you have higher up the DOM hierarchy, on the list. With relative applied, you could find some positioning still got applied - hence the display issues, the gaps, and the wonkiness in some browsers.

Static is a bit more specific and tells the browser to nullify any positioning already set on that element. You may have better success with that.

As a side note, this system you are using for sorting items looks a bit dated. All the items are absolutely positioned using Javascript and comments in the source code say it’s not been updated since 2015. Lots of extra code in there you don’t need and you are fighting against. Over time, you might find little bugs like this start to creep in.

There is now something available called CSS Flexbox which makes the positioning of items in list or grid format a whole lot easier. And needs only one or two lines of CSS. If you have the opportunity, you might want to consider rebuilding this page with a newer stack that can use this.

1 Like
5

Thanks @willwood . Your revised code seems to do the trick.

As far as the system I’m using, it is @yabdab Filter stack, and inside it I am using @Doobox Frag and @yuzool Cart 3. Everything else is in the @MultiThemes Plan theme and Yourhead Stacks 4. I have no control over the RW add-ons, so I have to live with what I have.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.