I love the effect of using border and box-shadow inset but only "Chrome" does support the inset negative value 0px, 0px, -1px.
However when I checked FF, Safari and IE (opera I don't have it but I bet it doesn't support it either)... There wasn't box-shadow at all.
When I inspect elements with firebug and try to type box-shadow: 0px 0px 1px rgba(255,255,255,0.7) inset; it does appears but not with -1px. Then the value is invalid.
Does anybody know anything about this? If not how can I make "IF" the browser isn't chrome, then add positive value instead?
You could use user-agent detection to detect chrome browser:
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
(taken from this page)
and then:
// include this in the <head> of your doc
if (is_chrome) {
<link href="chrome_style.css" rel="stylesheet" />
} else {
// do stuff for other browsers (or ignore)
}
It seems the word 'chrome' appears in most (if not all) chrome's user agent.
I found that userAgentString.com provides a list for previous user-agent strings of older versions as well.
I'm sure there's a better way for this specific case, but I just want to share this.
CSS Browser Selector is a pretty cool little JS file that allows you to specify CSS classes for specific browsers.
For example the following will only apply to elements with the example class if the browser is IE7.
.ie7 .example {
background-color: orange
}
The page lists all the supported browsers and you can make a style that applies to everything but Chrome.
.ie, .ie7, .ie8, .opera, ... { style }
Related
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
But are those styles hardcoded or is merely adding a prefix address that browser?
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px; not that I'd want to, just wondering.
And does the prefix approach work cross browser? I'm wondering because Internet Explorer.
Finally, will margin:10px ever knock out -moz-margin:10px? As in, "We, Mozilla, finally support margin so we are going to ignore all old -moz-margin tags and will just use the value in the margin tag".
It's very bad habit to apply css for specific browser. But there are solutions also:
Only Moz:
#-moz-document url-prefix(){
body {
color: #000;
}
div{
margin:-4px;
}
}
chome and safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #90f;
}
}
Below IE9:
<!--[if IE 9]>
body {
background:red;
}
<![endif]-->
I recommend don't use this moz, and safari prefix untill and unless necessary.
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.
As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just property wouldn't work so we'd use -prefix-property for certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The browser-specific prefix version thing doesn't exist.
Hope this answers your question.
As a workaround you can detect browser version in JS, and add it to class of your root element. You can detect browser through user agent , and there are multiple libraries in npm.
Using this class as a base, you can target browsers
function detectBrowser() {
if (navigator.userAgent.includes("Chrome")) {
return "chrome"
}
if (navigator.userAgent.includes("Firefox")) {
return "firefox"
}
if (navigator.userAgent.includes("Safari")) {
return "safari"
}
}
document.body.className = detectBrowser()
p {
display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
display: block
}
My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>
I am making some animation and graphics libraries to work with html. For some things clipping is needed and since the elements are generated dynamically, clip-path (mostly polygon) is added dynamicaly in elements'a style property :
el.style.clipPath = 'polygon(..)';
Firefox (76) works just fine, however Chrome (83) (and Opera as well) dont respect the clip-path property (on chrome element inspect it is not even shown on element's style properties as present)
It was supposed to be a bug in Chrome prior to v.64 but wherever I looked it says latest chrome (and webkit browsers in general) have full support for clip-path and polygon in particular.
Note: It is not an issue to test with url of svg path to be used a clip mask, but I would like to avoid svg, I would like to keep it pure html/css (however if i rememeber correctly not even svg inline url works with chrome when I was pulling my hair trying to figure out why it doesnt work as expected).
I have also tried adding with browser prefix (ie el.style.WebkitClipPath = 'polygon(..)') but nothing changed.
Test example should display a triangle (doesnt work on Chrome, at least my latest Chrome 83.0.4103.61 64bit windows):
var test = document.getElementById('test');
test.style.clipPath = 'border-box polygon(0px 0px, 200px 100px, 0px 200px)';
#test{
position:relative;
width: 200px;
height:200px;
background: #ff0000;
padding: 0;
margin: 0;
border: 2px solid #00ff00;
box-sizing: border-box;
overflow: hidden;
}
<div id="test"></div>
What am I missing? Does chrome support clip-path with polygon, or not?
To sum up the comments by #TemaniAfif in an answer so it stays:
If border-box is removed from clip-path, eg:
test.style.clipPath = 'polygon(..)';
then it works in Chrome too. However as per the latest spec on MDN, the following is valid combination and should be supported (support for Chrome on that page is green as grass):
/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);
The clip-path assumes a box model anyway, and it is imperative in certain cases that user sets the assumed box-model, for clipping, explicitly, so that is why combined values are supported. But it seems it is not so for Chrome (and Opera as far as I have tested).
So this is only a workaround untill full support of the feature is provided.
A couple of previous post seems to indicate that -moz-background-clip: text is not available in Mozilla.
-moz-background-clip: *text* in Mozilla
Is it possible to hide what appears to be a proprietary WebKit only CSS feature from Firefox and other browsers? I would like to hide the pseudo "after" rule which adds text content to the page to achieve the desired effect from Firefox and IE, etc.
Here is my site, the text clearly renders badly in Firefox but fine in Chrome
http://sandpit.jonathanbeech.co.uk/
Yes, while background-clip is a valid CSS3 property, the text value in non-standard. As such no other browser supports it, and you do not need the other prefixes.
The problem you are seeing is that this feature does not fallback gracefully. Browsers that do not support it will show the background for the entire element.
To avoid this you need to hide the background from other browsers. The best way to do this is to use a webkit prefix. WebKit does not support this for the background property, but it does for CSS gradients. Thus you can specify a transparent gradient, and then specify your background image, by taking advantage of multiple background images:
background: -webkit-linear-gradient(transparent, transparent), url("http://sandpit.jonathanbeech.co.uk/wp-content/themes/jontheme/images/crosshatch.png") transparent;
The main problem here is that Opera supports this -webkit- prefix for compatibility reasons. So you just need to specify a -o- gradient afterwards to cancel that out:
background-image: -o-linear-gradient(transparent, transparent);
You then need to make the text transparent, so that other browsers do not see it:
color: transparent;
See this fiddle to see it in action:
http://jsfiddle.net/dstorey/2dhNM/
As an aside, you can remove the z-index, as this only works on positioned (or not fully opaque) elements. As you've not set opacity or a position other than static on the ::after, this will not apply.
The solutions here have some different methods, which you could use to hide specific CSS properties from FF and other browsers. A bit messy/hacky though.
You could keep the CSS the same and just add
#-moz-document url-prefix() {
.css:after, .hoo:after, .prof:after{ display: none; }
}
to remove the background pattern.
Using SVGs as recommended by the original post answers, would be a more elegant way to illustrate the text background cross-browser.
The CSS-Tricks article "Show Image Under Text (with Acceptable Fallback)" presents a nice solution. With it, -webkit-background-clip:text styled elements look ok-ish in other browsers (solid text on solid background).
Essentially, they use Modernizr to detect if the browser supports -webkit-background-clip:text, and only apply it if yes. Modernizr has to be extended with a custom test to make this possible:
<script src="modernizr-1.6.min.js"></script>
<script>
Modernizr.addTest('backgroundclip',function() {
var div = document.createElement('div');
if ('backgroundClip' in div.style)
return true;
'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val) {
if (val+'BackgroundClip' in div.style) return true;
});
});
</script>
Issue
Using the following just simply doesn't work properly in -webkit- and -moz- browsers:
#exampleElement {
background-color: red; /* For example */
}
#exampleElement ::selection {
color: black;
background-color: white;
}
Result: WebKit- and Blink-powered browsers
In Chrome, Opera, and Safari, ::selection's background-color renders as if it was 50% alpha but the font colour is correct.
Chrome 29.0.1547.62:
Opera 15.0.1147.130:
Safari 5.34.57.2:
Result: Gecko-powered browsers
In Firefox, the entire ::selection rule is ignored. ::selection's background-color just happens to be white due to #exampleElement's dark background-color (thanks to #BoltClock for noticing that)
Firefox 22.0:
Result: Trident-powered browsers
In Internet Explorer, (would you believe) everything is rendered perfectly.
Internet Explorer 10.0.9200.16660:
Is this just a flaw of these rendering engines / browsers or are there -webkit- and -moz- alternatives that I'm unaware of?
I've saved an example of this on jsFiddle, for people to see: http://jsfiddle.net/BWGJ2/
According to quirksmode.org, -webkit-selection and -moz-selection are indeed available. I just tested it with Chrome (18) and Firefox (13) and can confirm that it works with Firefox, but I didn't have success with -webkit-selection on Chrome (it ignored it), and according to this SO question it doesn't exist (and the answer says that ::selection should also work on all browser, but doesn't for me, too).
As already metioned in this answer, Chrome forces the selection to be transparent, but you can work around this using
background:rgba(255, 255, 255, 0.99);
For more details, checkout the linked answer by tw16
Furthermore, this works for me on FF:
::selection { /* stuff */ }
::-moz-selection { /* stuff */}
But this does not:
::selection, ::-moz-selection { /* stuff */ }
But maybe this is not related to ::selection but does apply on all pseudo elements, couldn't find an answer to that.
There are browser-dependent versions. The version you're using was the standard CSS3 way, but then it got dropped from the spec. I dunno about its browser support...
And something else to consider: An ID-based CSS selector might "outweigh" a pseudoclass-based selector, resulting in the ID-based CSS always taking precedence. So try adding !important to your ::selection style to make sure it's always used when applicable.
Hope that helps!
I want to use gradient for background in Mozilla Firefox Like
background: -moz-linear-gradient(#C6991D, #F7D065) repeat scroll 0 0 transparent;
And for other browsers i m using background-color Like
background-color: #DFB542;
I need to put condition only for firefox. I know the condition for IE
<!--[if IE 6]>
instructions for IE 6 here
<![endif]-->
But not for firefox. Plz help me.
Thanks!
this does not need conditionals
background-color: #DFB542;
background: -moz-linear-gradient(#C6991D, #F7D065) repeat scroll 0 0 transparent;
since -moz- is a vendor-specific prefix by itself, only firefox reads it. it' ignored by other browsers.
placing it in this order in your CSS, firefox will read the first declaration and then the second will override or cascade over the first.
on other browsers, they read the first declaration but ignore the seconds since they don't know how to parse it. they skip over the second declaration.
Firefox doesn't understand conditional comments, only IE does. So
Firefox simply skips on <![if !IE 7]and <![endif] as unrecognized
tags but it render the rest. It means that you cannot use content-
revealing comments here, only content-hiding ones.
See this post
You can do it with javascript
if(navigator.appCodeName=='Mozilla' || navigator.appCodeName=='Netscape'){
document.write('<style type="text/css">');
//document.write('your css code');
document.wirite('</style>');
}