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.
Related
It's "well known" that you can use a CSS variable to simplify writing properties that require browser-specific vendor prefixes. (See Lea Verou, "Autoprefixing, with CSS variables!".) For example,
* {
--clip-path: initial ;
-webkit-clip-path: var( --clip-path ) ;
clip-path: var( --clip-path ) ;
}
.maximalCircle {
--clip-path: circle(50%);
}
In this example,
Setting --clip-path:initial; cancels inheritance so an element will have a clip-path value other than initial (which equals border-box) only if --clip-path is defined within that element.
--clip-path: circle(50%); effectively sets the value for both the vanilla clip-path and the WebKit-specific -webkit-clip-path properties.
You can see this in action at this Pen.
I'm failing, however, in using CSS variables to simplify a different property: the -webkit-background-clip property: if I assign a CSS variable --clip-path:text; as the value of the -webkit-background-clip property, (a) Safari (and Firefox) like it fine but (b) Chrome doesn't understand it (i.e., the computed value in Chrome is background-clip: border-box, which is the default value).
[In all these tests, I'm using Safari 12.1.1, Firefox Quantum 67.0.4, Firefox Developer Edition 68.0b12, and Chrome 75.0.3770.100.]
Cliff Notes for below minimum working example: A <div class="text-masked-gradient"> contains a text string, which sits on a gradient background. The CSS background-clip:text (and/or -webkit-background-clip:text) property should cause the background to show through only the text itself. The image below shows (a) what it looks like when it works (L) and (b) when it doesn't (R).
My HTML markup:
<div class="text-masked-gradient">
YELP
</div>
Full CSS is below. This code also exists at this Pen. (I consider many more scenarios, for diagnostic purposes, at this other Pen.)
The full CSS:
.text-masked-gradient {
--background-clip: text ;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
-webkit-background-clip: var( --background-clip );
height: 150px ;
width: 300px ;
outline: solid black ;
margin: 50px ;
font-size: 7em ;
text-align: center ;
font-weight: 700 ;
background-image:
radial-gradient(circle at top left,red,chartreuse);
}
This renders correctly in:
Safari
Firefox Quantum
Firefox Developers Edition
but not in
Chrome (where the entire rectangle is the gradient, with no text).
Am I doing something wrong? Is this a Chrome bug related to CSS variables and the -webkit-background-clip property?
(This example works fine in all these browsers, including Chrome, if you use -webkit-background-clip:text rather than webkit-background-clip:var(--background-clip).)
Lea Verou has confirmed that this is a Chrome bug. She created this reduced test case, which fails when viewed with Chrome. She filed this bug report: Issue 980439.
On top of that, there's a WebKit bug (thus affecting both Safari and Chrome) when you try to define the background-clip property with a CSS variable, e.g., background-clip:--a, where the CSS variable is text. This causes both Chrome and Safari to ignore a valid -webkit-background-clip:text rule. See Bug 199410 - background-clip:var(--a) invalidates -webkit-background-clip:text when --a:text.
Due to both of these bugs, the background-clip property isn't at this time a good candidate for using CSS variables to simplify vendor prefixes.
I'm wondering what happens if a CSS style is supplied for a property which the browser supports, but the style itself isn't supported.
Take for example the following in IE8;
background: url(../path/to/img.png);
background: rgba(0,0,0,0.8);
Does IE8 simply ignore the second style due to it's lack of supported for CSS3 colours?
Thanks :).
Does IE8 simply ignore the second style due to it's lack of supported for CSS3 colours?
The answer is YES, it will completely ignore that value, and hence it won't render any color, it's a common practice to use a fall back with a hex value like
.class_name {
background: #000;
background: rgba(0,0,0,.5);
}
So, when you write the background twice, it's completely valid, the browsers who understand the rgba() will render an opaque background, but the browsers who don't understand rgba() will use #000.
Though, there are various workarounds for that, like, you can use :before or :after, with filter property with a negative z-index, which can be used as an opaque background, or you can do is, use a normal 1x1 px opaque png image only for IE8.
For example
background: url("IMAGE_URL_HERE")\9; /* Targets IE8 and below */
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>
This works well for browsers that support background-size. Otherwise the 2x image is zoomed.
.a {
background-image: url(img2x.jpg); /* 1000x1000 */
background-size: 100%;
height: 500px;
width: 500px;
}
This should be used for browsers without background-size support.
.a {
background-image: url(img1x.jpg); /* 500x500 */
height: 500px;
width: 500px;
}
Is it possible to trick the browser to fallback when background-size is not supported? I know I can use #supports but it's much less supported than background-size so quite pointless in this case. I don't want to use JavaScript either.
Basically like so, except work!
.a {
background-image: url(img1x.jpg); /* 500x500 */
height: 500px;
width: 500px;
/* stop parsing this rule when background-size is not supported */
/* otherwise continue parsing and set different background-image */
background-size: 100%;
background-image: url(img2x.jpg); /* 1000x1000 */
}
This doesn't work obviously, but is there a trick which could make it work? Thanks.
A CSS-only fallback for background-size is tricky, but yes it can be done.
The trick is to use the short-form background style to set the various background properties, rather than using the individual styles like background-size, background-image, etc.
So in your case, you would have something like this:
background: url(img2x.jpg) 0% 0%/100%;
(The 0% 0% is for background-position (0% 0% is default) which is required before the background-size value when using the short-form style).
So far, all I've done is condense your existing code into a single short-form CSS line, but the clever bit is that now we've done this, a browser that doesn't recognise background-size will throw away the whole line, rather than just throwing away the background-size on its own.
This means that we can specify an entirely different set of background values for older browsers.
background: url(ie8bg.jpg); /* Shown by IE8 and other old browsers */
background: url(img2x.jpg) 0% 0%/100%; /* shown by new browsers with background-size support*/
You can see a demonstration of this in action here. Modern browsers will get the one background image, stretched by a 100% background-size setting, and older browsers (like IE8) will get the an entirely different image, without any stretching.
Since you get to define an entirely separate background for old browsers, you can even do things like have a solid background colour for IE8 rather than an image while still providing an image for other browsers.
So yes, a fully CSS solution that gives you a fallback for browsers that don't support background-size.
Hope that helps.
[EDIT]
Browser compatibility may be a minor issue here. Some browsers may support background-size but not support it as part of the background short syntax. For the most part this applies only to older browsers (eg Firefox 7), but it is still a problem in current versions of Safari. What this means is that with this technique, Safari will see the fall-back background, even though it does actually support background-size.
This obviously isn't ideal, but it is mitigated by the fact that it will at least get the fallback image, which means the page ought to at least look okay, if not quite as good as in other browsers. Hopefully this issue in Safari will be fixed in a future version.
In the meanwhile, this point doesn't detract from the fact that this answer is a valid solution to the question - it does indeed provide a fallback option in pure CSS.
In light of this question I've written a blog post on the subject, which hopefully covers it in more detail and provides other options if this CSS fall-back solution isn't sufficient.
You already mentioned #supports. You could define imgx1.jpg as default and if background-size is supported, you set it to img2x.jpg
For browsers like Chrome you could parse your CSS file with PHP and decide according to the User-Agent if the browser supports this or not.
You get the User-Agent in PHP with $_SERVER['HTTP_USER_AGENT']
I might not completely understand what exactly the problem is with the lack of support of the 'background-size' property, but here is my thinking:
If you want to use a double sized background image, probably that is for high density (retina) displays. If so, I'd try to define my basic style with the single background image and the 'background-size', which will be ignored by older IE versions. However, browsers handling the pixel-density media query will try to render the double density background image.
.a {
background-image: url(img1x.jpg); /* 500x500 */
background-size: 500px 500px;
height: 500px;
width: 500px;
}
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.a {
background-image: url(img2x.jpg); /* 1000x1000 */
}
}
I hope it makes sense and that's what you've been looking for.
Here are some more nice ideas about CSS/JS retina background sizing: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
Just trying to give the main content div on a site a border on the left and right side of the div. Rather than have separate divs for each border, I thought to use the border-left-image capability in CSS3 to make it happen. My code is as follows:
#content {
background-color: #7FC3F4;
height: 100%;
width: 900px;
border-left-width: 30px;
border-left-image: url(../images/border_left_gradient.png);
border-right-width: 30px;
border-right-image: url(../images/border_right_gradient.png);
margin-right: 10%;
margin-left: 10%;
}
Of all the Google searches I've done, I have to yet to come up with an explanation as to why this code isn't valid. Some results return numeric values to be placed after the url, however regardless of what combination of numbers I try, no dice.
Thoughts?
border-image is now supported in all the major browsers (2014-05-22)
Demo with a single border-left-image
Demo with different left and right images.
The demos now need a minimum of Chrome 15, Safari 6, Firefox 15, IE 11 or Opera 15.
It is not actually possible to do this with separate image files, but you can slice a single image on the left and right. See the border-image page on MDN which shows some good examples or CSS Tricks for a comprehensive summary of how the other slicing options work.
Note: if you need earlier browser support please ask as a previous version of my answer did work with Chrome 12, Safari 5.0.3, Firefox 4 and Opera 10 but I have updated it now that new browsers support prefix-free CSS3.
Edit: Firefox now requires an additional property setting - border-style: solid (see CSS - New Firefox-release doesn't show Border-Image anymore)
Good solution : Chrome AND Firefox compatibility :
http://jsfiddle.net/Yas34/954/
missing border-style: solid to current "good answer"
For one your url is bogus (..images?). for a second have you checked your browser supports the property? last I checked, which wasn't that long ago, nobody supported it (well maybe webkit nightlies).