We're experiencing difficulties with CSS targeting in Firefox Quantum. We are aware of the standard method to target all Firefox browsers using:
@-moz-document url-prefix() {
.my-style{
}
}
However, we specifically need to target Firefox Quantum as there are discrepancies in CSS interpretation between it and older versions of Firefox. Any suggestions on how to achieve this?
While reviewing the Fx Quantum 57 release notes, particularly the Quantum CSS notes, a comparison between Gecko and Stylo reveals various discrepancies along with some potential workarounds.
One notable difference highlighted is:
- In Quantum CSS,
calc()is supported wherever specified in the spec (bug 1350857). In Gecko, this functionality is lacking.
A suggested approach involves using @supports with a calc(0s) expression in combination with @-moz-document to test for Stylo support — as Gecko does not handle <time> values within calc() expressions unlike Stylo:
@-moz-document url-prefix() {
@supports (animation: calc(0s)) {
/* Stylo */
}
}
For illustration purposes, consider this proof-of-concept:
body::before {
content: 'Not Fx';
}
@-moz-document url-prefix() {
body::before {
content: 'Fx legacy';
}
@supports (animation: calc(0s)) {
body::before {
content: 'Fx Quantum';
}
}
}It's worth noting that Fx Quantum versions 59 and 60 initially restricted the usage of @-moz-document on public documents, but version 61 reinstated support for the @-moz-document url-prefix() technique, enabling it to function as intended. However, since version 60 is an ESR release, adjustments are required if targeting that specific version by switching the @-moz-document at-rule to a media query:
@media (-moz-device-pixel-ratio) {
@supports (animation: calc(0s)) {
/* Stylo */
}
}
Dealing with older versions of Firefox can be challenging — focusing solely on versions supporting @supports, starting from Fx 22 and onwards, can be achieved using
@supports not (animation: calc(0s))@-moz-document url-prefix() {
@supports not (animation: calc(0s)) {
/* Gecko */
}
}
However, for even earlier versions' compatibility, leveraging the cascading nature of CSS is recommended, as shown in the previously mentioned proof-of-concept.
Sorry, but there is no foolproof method to achieve this. Although some might recommend using the user agent string, it has been proven to be unreliable as well (source: link).
My suggestion would be to opt for feature detection or queries with Javascript or utilize @supports in CSS for a more reliable approach (source: link).
I am working with an HTML structure that has a specific layout, and I need to target all odd <span> elements globally without considering their parent elements. Is there a way to style 1, 3, 5, 7, 9 in red color? I attempted to use :nth-child(odd) b ...
Highcharts offers a background color for all columns in a series. The hover color across themes is consistently a light blue (155, 200, 255, .2). To see an example, visit: http://jsfiddle.net/38pvL4cb/ If you look at the source code, Highcharts creates a ...
How can I create a dynamic table with variable-sized columns that always fills the parent area, regardless of the number of cells? The goal is to allow scrolling if needed, but ensure the table spans the entire parent space even with few cells. I've ...
Is there a way to increase the spacing between TableRow MaterialUI components in my code? <S.MainTable> <TableBody> {rows.map(row => { return ( <S.StyledTableRow key={row.id}> <TableCell component="th" s ...
After integrating Bootstrap Sass into a Rails project, I embarked on revamping its homepage. However, I encountered an issue with the background style applied to the <body> element - it only affected the portion of the page visible upon initial loadi ...
I am having trouble displaying additional data in a table when a specific row is clicked. Here is the table structure I am working with: <div id="display"> <div class="displayRow"> <img src="images/expand-arrow.gif" class="expandArrow ...
Is there a way to customize the appearance of buttons in Mobile Safari so that they show my specified "down" (:active) state instead of the default semitransparent overlay when touched? ...
https://i.stack.imgur.com/sr4PF.pngIs there a way to adjust the border of text that already has a border applied? I have successfully created the text with the border using the following CSS: h1 { font-size: 35pt; text-align: center; font-family: ...
Navbar <div className="collapse navbar-collapse" id="navbarSupportedContent"> <ul className="navbar-nav ml-auto"> <li className=&quo ...
How can I incorporate CSS styles into an SSRS report file? I'm looking for ways to edit the rdl file using any tool, without being limited to BIDS. Appreciate any insights or advice. Thank you! ...
This test page has been created to showcase the issue: <html> <head> <style> .panel { position: absolute; width: 326px; max-height: 200px; overflow: scroll; z-index: 1000; } .item-container { width: 100%; list-style: none; ...
Example data value category type item1 100 food fruit item2 50 drinks soda item3 75 snacks chips I want to achieve this forma ...
Recently embarked on my journey of learning HTML and CSS, just 2 days ago. Curious to know if it's possible to implement a loading overlay instead of animating manually. Appreciate any guidance. Thanks! ...
Currently, I am attempting to separate a child element from its parent that has overflow: hidden applied. The main reason for restricting the dimensions of the parent is for a JavaScript workaround. I have experimented with positioning the child element, ...
Our homepage features various elements as part of the menu. Each element consists of a picture, title, and small description. The issue is that these menu items always display a border when the mouse hovers over them, despite attempts to hide it. You can ...
Is there a way to customize the background color and flashing color of the Skeleton component in Material UI? I would like to implement custom styling for it, similar to what is shown below: <Skeleton variant="circle" classes={{root:'pla ...
I am currently working on a filter popup that includes a list of checkboxes. By default, some items should be selected and others not selected. I have connected these checkboxes to an object array using v-model. My issue is that when I deselect and select ...
I encountered an unusual issue in IE11 and Edge (on Windows 10) where a strange, transparent border appears in the HTML/CSS code. <!DOCTYPE html><html> <head> <style> body { background-color:red; ...
I've been struggling to center the MatIcon in the MatButtonToggle, trying multiple methods without success. It may seem like a minor issue, but it's causing quite a bit of trouble for me. Can someone please guide me on how to make this adjustment ...
My challenge is locating an element without any ID or distinctive identifiers. The HTML code structure resembles the following: <div class="item_select"> <span class="item_selection_number">A </span> </div> <div class="item_ ...