Browser specific css firefox

Browser specific css firefox DEFAULT

Targeting only Firefox with CSS

Sometimes the content needs to focus on the particular browser. This article target the Firefox browser to display CSS property. The targeted CSS will works only for targeted browser. Target the Firefox browser with CSS in many ways. Some of them are discussed below:

Method 1: This method uses Mozilla specific extension to add CSS property. This extension supply the CSS property only in Firefox browser.
Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

@-moz-document url-prefix() { element { // CSS Property } }

Example:

Output
firefox

Method 2: The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using platform-native styling based on the operating system’s theme.
Syntax:

@supports (-moz-appearance:none) { element { // CSS Property } }

Example:

Output:
firefox1

Note: The CSS style of above examples will work only in Firefox browsers.


My Personal Notesarrow_drop_up
Sours: https://www.geeksforgeeks.org/targeting-only-firefox-with-css/

Handling common HTML and CSS problems

Another problem that might come up is differences in layouts between browsers. Historically this used to be much more of a problem, but recently, with modern browsers tending to support CSS more consistently, layout issues tend to be more commonly associated with:

  • Lack of (or differences in) support for modern layout features.
  • Layouts not looking good in mobile browsers (i.e. responsive design problems).

Note: Historically web developers used to use CSS files called resets, which removed all the default browser styling applied to HTML, and then applied their own styles for everything over the top — this was done to make styling on a project more consistent, and reduce possible cross browser issues, especially for things like layout. However, it has more recently been seen as overkill. The best equivalent we have in modern times is normalize.css, a neat bit of CSS that builds slightly on the default browser styling to make things more consistent and fix some layout issues. You are advised to apply normalize.css to all your HTML pages.

Note: When trying to track down a tricky layout issue, a good technique is to add a brightly colored to the offending element, or all the elements nearby. This makes it a lot easier to see where everything is placed. See Debug your CSS with outline visualizations for more details.

Support for new layout features

Much of the layout work on the web today is done using floats — this is because floats are well-supported (way back to IE4, albeit with a number of bugs that would also need to be investigated if you were to try to support IE that far back). However, they are not really meant for layout purposes — using floats the way we do is really a hack — and they do have some serious limitations (e.g. see Why Flexbox?)

More recently, dedicated layout mechanisms have appeared, like Flexbox and CSS Grids, which make common layout tasks far easier and remove such shortcomings. These however are not as well-supported in browsers:

  • CSS grids are very new; at the time of writing, they were only supported in the very newest versions of modern browsers.
  • Flexbox is well-supported in modern browsers, but provides problems in older browsers. IE 9 doesn't support it at all, and IE 10 and old versions of iOS/desktop Safari respectively support incompatible old versions of the flexbox spec. This results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see Advanced Cross-Browser Flexbox to get an idea).

Layout features aren't as easy to provide graceful fallbacks for as simple colors, shadows, or gradients. If layout properties are ignored, your entire design will likely fall to pieces. Because of this, you need to use feature detection to detect whether visiting browsers support those layout features, and selectively apply different layouts depending on the result (we will cover feature detection in detail in a later article).

For example, you could apply a flexbox layout to modern browsers, then instead apply a floated layout to older browsers that don't support flexbox.

Note: There is a fairly new feature in CSS called , which allows you to implement native feature detection tests.

Responsive design problems

Responsive design is the practice of creating web layouts that change to suit different device form factors — for example, different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using media queries, and make sure it is applied correctly using viewport. You can find a detailed account of such practices in The building blocks of responsive design.

Resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem. In addition, different devices can have a range of different resolutions, meaning that smaller images could appear pixelated. There are a number of techniques that allow you to work around such problems, from simple mobile first media queries, to more complex responsive image techniques.

Another difficulty that can present problems is browser support for the features that make the above techniques possible. media queries are not supported in IE 8 or less, so if you want to use a mobile first layout and have the desktop layout then apply to old IE versions, you'll have to apply a media query polyfill to your page, like css3-mediaqueries-js, or Respond.js.

Finding help

There are many other issues you'll encounter with HTML and CSS, making knowledge of how to find answers online invaluable.

Among the best sources of support information are the Mozilla Developer Network (that's where you are now!), stackoverflow.com, and caniuse.com.

To use the Mozilla Developer Network (MDN), most people do a search engine search of the technology they are trying to find information on, plus the term "mdn", for example "mdn HTML5 video". MDN contains several useful types of content:

caniuse.com provides support information, along with a few useful external resource links. For example, see https://caniuse.com/#search=video (you just have to enter the feature you are searching for into the text box).

stackoverflow.com (SO) is a forum site where you can ask questions and have fellow developers share their solutions, look up previous posts, and help other developers. You are advised to look and see if there is an answer to your question already, before posting a new question. For example, we searched for "cross browser html5 video" on SO, and very quickly came up with HTML5 Video with full cross browser compatibility.

Aside from that, try searching your favorite search engine for an answer to your problem. It is often useful to search for specific error messages if you have them — other developers will be likely to have had the same problems as you.

Summary

Now you should be familiar with the main types of cross browser HTML and CSS problems that you'll meet in web development, and how to go about fixing them.

In this module

Sours: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS
  1. Flat rainbow sour candy
  2. Xda android app
  3. 4x4 caster wheels
  4. Pac exhaust brake
  5. Synonyms for betrayal

Targeting only Firefox with CSS

First of all, a disclaimer. I don't really advocate for the solution I present below. The only browser specific CSS I write is for IE (especially IE6), although I wish it wasn't the case.

Now, the solution. You asked it to be elegant so I don't know how elegant is it but it's sure going to target Gecko platforms only.

The trick is only working when JavaScript is enabled and makes use of Mozilla bindings (XBL), which are heavily used internally in Firefox and all other Gecko-based products. For a comparison, this is like the behavior CSS property in IE, but much more powerful.

Three files are involved in my solution:

  1. ff.html: the file to style
  2. ff.xml: the file containg the Gecko bindings
  3. ff.css: Firefox specific styling

ff.html

ff.xml

ff.css

Update: The above solution is not that good. It would be better if instead of appending a new LINK element it will add that "firefox" class on the BODY element. And it's possible, just by replacing the above JS with the following:

The solution is inspired by Dean Edwards' moz-behaviors.

Sours: https://www.generacodice.com/en/articolo/237313/Targeting-only-Firefox-with-CSS
Настройка внешнего вида Firefox при помощи файла userChrome.css

Table of Contents

If you’re a HTML developer you most likely know that there are times when you need to selectively apply some styles to a specific browser, or to a specific version/build of a browser. When such scenarios occur, there are a number of CSS and/or JS based techniques to achieve that result.

Here’s a collection of media queries that will allow you to do that in pure CSS3 code, without a single line of JavaScript code: most of them come from the browserhacks.com web site, which is an excellent resource of browser-specific CSS and JavaScript hacks for these kind of tasks.

Internet Explorer

IE 6

1

* html .ie6 {property:value;}

or

1

.ie6 {_property:value;}

IE 7

1

*+html .ie7 {property:value;}

or

1

*:first-child+html .ie7 {property:value;}

IE 6 and 7

@media screen\9 {

.ie67 {

property:value;

}

}

or

1

.ie67 {*property:value;}

or

1

.ie67 {#property:value;}

IE 6, 7 and 8

@media \0screen\,screen\9 {

.ie678 {

property:value;

}

}

IE 8

1

html>/**/body .ie8 {property:value;}

or

@media \0screen {

.ie8 {

property:value;

}

}

IE 8 Standards Mode Only

1

.ie8 {property/*\**/:value\9}

IE 8,9 and 10

@media screen\0 {

.ie8910 {

property:value;

}

}

IE 9 only

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {

// IE9 CSS

    .ie9{

property:value;

}

}

IE 9 and above

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {

// IE9+ CSS

    .ie9up {

property:value;

}

}

IE 9 and 10

@media screen and (min-width:0\0) {

.ie910 {

property:value\9;

}/* backslash-9 removes ie11+ & old Safari 4 */

}

IE 10 only

1

_:-ms-lang(x), .ie10 {property:value\9;}

IE 10 and above

1

_:-ms-lang(x), .ie10up {property:value;}

or

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.ie10up {

property:value;

}

}

IE 11 (and above..)

1

_:-ms-fullscreen, :root .ie11up {property:value;}

Microsoft Edge

@supports (-ms-ime-align:auto) {

.selector {

property:value;

}

}

Firefox

Any version (Gecko)

@-moz-document url-prefix() {

.ff {

color:red;

}

}

Quantum Only (Stylo)

@-moz-document url-prefix() {

@supports (animation: calc(0s)) {

/* Stylo */

.ffStylo {

property:value;

}

}

}

Legacy (pre-Stylo)

@-moz-document url-prefix() {

@supports not (animation: calc(0s)) {

/* Gecko */

.ffGecko {

property:value;

}

}

}

Webkit

Chrome & Safari (any version)

@media screen and (-webkit-min-device-pixel-ratio:0) {

property:value;

}

Chrome 29+

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {

.chrome {

property:value;

}

}

 Safari (7.1+)

_::-webkit-full-page-media, _:future, :root .safari_only {

property:value;

}

Safari (from 6.1 to 10.0)

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {

@media {

.safari6 {

color:#0000FF;

background-color:#CCCCCC;

}

}

}

Safari (10.1+)

@media not all and (min-resolution:.001dpcm) {

@media {

.safari10 {

color:#0000FF;

background-color:#CCCCCC;

}

}

}

That’s it for now: if you have other useful CSS3 media queries that you think should be added to this list, feel free to give your suggestion by writing a comment.

For further info or additional media queries, visit the awesome browserhacks.com website!

Sours: https://www.ryadel.com/en/css3-media-query-target-only-ie-ie6-ie11-firefox-chrome-safari-edge/

Specific firefox browser css

Mozilla CSS extensions

Mozilla applications such as Firefox support a number of special Mozilla extensions to CSS, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries. These extensions are prefixed with .

Mozilla-only properties and pseudo-classes (avoid using on websites)

Note: These properties and pseudo-classes will only work in Mozilla applications such as Firefox, and are not on a standards track. Some of them apply only to XUL elements.

B

C–I

O

S–Z

Formerly proprietary properties that are now standard

Note: To maximize the compatibility of your CSS, you should use the unprefixed standard properties instead of the prefixed ones listed below. Once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while.

Values

Global values

    and

      keywords

        •  
        •  
        •  
        •  

        • (default value in quirks mode)

        • (also a color)
        • (also a color)

            , , and

              Pseudo-elements and pseudo-classes

              At-rules

              Media features

              Other

              See also

              Sours: https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
              Настройка внешнего вида Firefox при помощи файла userChrome.css

              appearance (-moz-appearance, -webkit-appearance)

              SafariSafariFirefox Chrome Safari EdgeSafari EdgeFirefox Chrome Safari EdgeFirefoxThe element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.FirefoxFirefoxSafariSafariSafari EdgeSafariFirefox Chrome SafariSafariSafaridatalistFirefox Chrome Safari EdgeChrome SafariChrome SafariSafariSafariChrome Safari EdgeChrome Safari EdgeChrome SafariSafariSafariSafari EdgeSafari EdgeChrome SafariChrome Safari EdgeChrome Safari EdgeChrome SafariSafariChrome SafariChrome SafariChrome SafariSafariChrome SafariSafariChrome SafariChrome SafariFirefox Chrome Safari EdgeFirefox Chrome Safari EdgeThe element is styled as the text field for a menulist. (Not implemented for the Windows platform) FirefoxUse instead.FirefoxChrome SafariFirefoxThe element is styled like a progress bar. Use insteadFirefoxFirefoxFirefoxSafariSafariFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxSafari EdgeChrome Safari Edge(Works on Chrome 51 on Windows 7)Safari EdgeChrome Safari EdgeSafariNoneChrome Safari EdgeChrome Safari EdgeChrome Safari EdgeFirefoxUse instead.SafariiOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1
              Sours: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

              You will also be interested:

              Targeting only Firefox with CSS

              First of all, a disclaimer. I don't really advocate for the solution I present below. The only browser specific CSS I write is for IE (especially IE6), although I wish it wasn't the case.

              Now, the solution. You asked it to be elegant so I don't know how elegant is it but it's sure going to target Gecko platforms only.

              The trick is only working when JavaScript is enabled and makes use of Mozilla bindings (XBL), which are heavily used internally in Firefox and all other Gecko-based products. For a comparison, this is like the behavior CSS property in IE, but much more powerful.

              Three files are involved in my solution:

              1. ff.html: the file to style
              2. ff.xml: the file containg the Gecko bindings
              3. ff.css: Firefox specific styling

              ff.html

              ff.xml

              ff.css

              Update: The above solution is not that good. It would be better if instead of appending a new LINK element it will add that "firefox" class on the BODY element. And it's possible, just by replacing the above JS with the following:

              The solution is inspired by Dean Edwards' moz-behaviors.

              Sours: https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css


              106 107 108 109 110