Currently i'm using elements with position: absolute for transitions but i should use translate instead. How to achive a fallback when translate is not available?
Without having any additional information, I'm assuming you'd like to use translate when it is available, and position: absolute when it is not. I found an excellent article that lists the pros and cons, and may solve some of your woes.
http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
Moving forward, you may want to look into the modernizr library, as it provides awesome tools for making your cutting-edge features work well on older browsers. I've posted a link to the CSS docs below.
http://modernizr.com/docs/#features-css
Finally, what i was doing is that i checked if CSS3 features are supported with JS. If not, i've attached a .fallback class to the body so i can make separate rules as a fallback.i've added like the following:
#animdiv{
transform: translate(0,100px);
}
.fallback #animdiv{
top: 100px;
}
Related
In this question I'm looking for the cleanest possible solution for the problem below, along with urging the browsers' coders to catch up with the spec, especially :dir() one!!
The problem and it's current best known to me solution:
I'd like to style the image below based on directionality, flipping it, for example, when in RTL mode. The image resides in a shadow DOM. As of now, I'm achieving that with the styling below.
::shadowRoot
<style>
.directed-image:dir(rtl) { transform: rotateY(180deg); } -- Firefox only as of now
:host-context([dir=rtl]) { transform: rotateY(180deg); } -- Chromium only as of now
</style>
<img class="directed-image" src="..." />
Issues yet to be solved:
None of the styles above helping Safari: it has not yet implemented :dir() pseudo class and it's people seems to have a strong objection to :host-context()
I'm really not fan of those double-done solutions for a platform's diversity; would like to get rid of those, but this is only a secondary concern
Solutions ?:
The best I'd wish to have is that :dir() will get wide cross browser support - it'll solve the Safari's issue as well as would provide a truly directionality context aware styling (downsides of [dir=ltr] are touched a bit in the WebKit's bug link above).
But given that
Chromium's bug on :dir() is staled from 2018
WebKit's bug on :dir() last touched at 2016!!!
Firefox's bug on :host-context() is staled from 2018 with some concerns about the spec
and unwillingness of WebKit to implement :host-context()
-- having all this: is there any other solution for the problem (looking to solve the Safari issue at first priority).
JS based solutions are interesting but much less preferred.
january 2020 answer:
As you said: the dir attribute on the body tag will (in most cases) be the only indication of a language change. Since CSS doesn't cascade (yet; as you said) the only option for now is for Elements to observe that attribute change. So I fear your only option is a MutationObserver (in the elements you own)
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: false, subtree: false };
Not sure if this is what you are looking for, but you could use RTLCSS. It's a CSS framework that allows you to easily switch between and create RTL and LTR stylesheets, without having to do too much double work.
It also supports a couple of big CSS frameworks if you use those, like Bootstrap and Semantic-UI
On a site I'm working on, I have css that uses translate3d to style it accordingly.
Example:
style="transform: translate3d(-133px, -8px, 0px);"
However, I now need to address this in older versions of IE. What other ways can it be done? Is there a way to use filters or something else to make it happen?
Maybe negative margins would help: margin-left: -133px; margin-top: -8px; but it might depend on parent element styles.
Altering the margins as noted above by #pavelccz will work and is probably best suited for most situations. Encountering this with leaflet as in my case, leaflet provides a global switch that will result in the same affect throughout the map. Using the switch of "L_DISABLE_3D = false" is the most practical for that situation. As noted in the documentation, this could impact performance, but it is a global way to address this issue.
http://leafletjs.com/reference.html#global-l_disable_3d
With some CSS styling properties, we need all these different kinds of approaches, tricks and hacks to make things work cross browser. I never wanted to be an expert in IE, and making it work, no...I wanted to specialize in designing good looking, practical and user friendly web applications without wondering if that rounded corner is going to be round in browser x and y.
CSS3 and even CSS doesn't work in browsers like IE7 like it's intended to, (I don't care for IE6), and one has to spend so much time in making things work across different browsers, that the creative concepts, and actual goal of a site goes out the window.
Is there is a solution for making/morphing CSS/CSS3 to be compatible with browsers that don't support it. Perhaps a JavaScript library?
It would be nice to be able to change opacity like this:
.style { opacity: 0.5; }
and not like this:
.style {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
...similar to Prefix Free which currently doesn't support IE
So are there JavaScript libraries out there that will dynamically expand CSS as needed by a particular browser, and also enable CSS3 support, and future proofing of CSS3?
One idea might be looking into the LESS framework. It's a object oriented way of doing CSS. So to set opacity, you'd do something like this:
.opacity (#opacity) {
opacity: #opacity;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=#opacity*100)";
filter: alpha(opacity=#opacity*100);
}
Then to use it, you'd just "call it" like a function.
.style {
.opacity(0.7);
}
And the output would be like your second code snippet
I use CSS3PIE for IE compatibility!
Not sure if there'd be any clashes between Prefix Free and CSS Pie - but it's worth a shot!
http://css3pie.com/
It requires a little bit of work to set up, but after that it's pretty good!
http://cssprefixer.appspot.com/ is possibly a good option! And using it in conjunction with something like LessCSS would be a viable option, but I guess the end results would be down to some proper benchmarking.
It's all about minimizing CSS file sizes, and also at the same time, trying to get the maximum client side performance in terms of rendering HTML and JS execution.
I want to put a red rectangular <div> element over my webpage so that it would look not only transparent, but also like blended in Photoshop’s Multiply mode.
The <div> would have position: fixed, so the content below it would change quickly.
Is that possible with any HTML5 / CSS3 / canvas / SVG trick?
I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:
// Might be an 'offscreen' canvas
var over = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');
over.blendOnto( under, 'screen', {destX:30,destY:15} );
See the README for more information, including the currently-supported blend modes.
You could use this to perform multiply from one canvas to another, but not over standard HTML elements.
No (not natively) but it's coming soon: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/
You can also look at this demo: http://media.chikuyonok.ru/canvas-blending/ to see how to do this with canvas.
Check the source for blending modes' formulae and how to apply them (formulae are much more readable than in pixastic or context-blender).
This isn't HTML5, but it's as close as I can find for what you're asking.
Javascript blending modes (OpenGL).
I don't think "blend modes" like Photoshop could be emulated with just pure HTML, unless the language took a sharp turn in another direction. But it would be great to see some easier way of doing this.
I am also very interested in doing that. Many layouts that I coded for visual designers could have used that. Aside from the other posts in this thread, there is a way to do this, currently only in Firefox 4, without using OpenGl or Canvas. It's trough the use of SVG filters. Aparrently it's on nighties from Webkit and Chrome also, but I couldn't see anything working yet.
Here are some demos and explanations:
(demo) http://people.mozilla.org/~roc/filter.xhtml
https://developer.mozilla.org/en/applying_svg_effects_to_html_content
https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html
IMHO something anyware close to blend modes are too much hard to achieve right now. It's very hard to find any references on feConvolveMatrix, feSpecularLighting, or feColorMatrix, and the examples are just impossible to figure out for me. They could work but I don't know how.
I wish something like EffectGames suggested:
div.sprite {
position: absolute;
z-index: 2;
composite: add;
}
This would be a way better approach. Maybe some ninja there skiled in mathematics could make us a lib to do that.
EDIT: There is an easier SVG spec to do exactly blend modes. But no browser that I tested have this working (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - But I also don't know if this will be possible to use in HTML-DOM elements.
This is the closest I have seen, and yes, all assets have to be in the canvas. Note that Internet Explorer starts supporting canvas in version 9 which is not out yet, so if you have to support IE<9 you'll have to use a workaround.
It's landed in Chrome Canary so should reach release soon. http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/
You can already use it with just simple CSS (no Canvas). Example:
mix-blend-mode: 'multiply'
Internet Explorer may not support it, but the other browsers do.
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Depending on the images involved and the exact effect you are after, you might be able to do some creative layering of images and CSS gradients to achieve the desired affect:
http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/
I have implemented most popular blend modes known from gimp/photoshop using canvas in http://canvasquery.com/ however it is not suitable for relatime.
This will change with introduction of native blend modes in canvas
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable
I'm using CSS Filters to modify images on the fly within the browser. These work perfectly in Internet Explorer, but aren't supported in Firefox.
Does anyone know what the CSS Filter equivalent for these is for Firefox? An answer that would work cross browser (Safari, WebKit, Firefox, etc.) would be preferred.
<style type="text/css">
.CSSClassName {filter:Invert;}
.CSSClassName {filter:Xray;}
.CSSClassName {filter:Gray;}
.CSSClassName {filter:FlipV;}
</style>
Update: I know Filter is an IE specific feature. Is there any kind of equivalent for any of these that is supported by Firefox?
Please check the Nihilogic Javascript Image Effect Library:
supports IE and Fx pretty well
has a lot of effects
You can find many other effects in the CVI Projects:
they are also JS based
there's a Lab to experiment
Good Luck
Could you give us a concrete example of what exactly you're trying to do? You'd probably get fewer "Your brower sux" responses and more "How about trying this different approach?" ones.
Normally CSS is used to control the look and feel of HTML content, not add effects or edit images in clever ways. What you're trying to do might be possible using javascript, but a behavior-oriented script still probably isn't very well suited for the kind of tweaking you want to do (although something like this is a fun and very inefficient adventure in CSS / JS tomfoolery).
I can't imagine a scenario when you would need the client to perform image tweaking in real-time. You could modify images server-side and simply reference these modified versions with your CSS or possibly Javascript, depending on what you're doing exactly. ImageMagick is a great little command-line tool for all the image effects you would ever need, and is pretty simple to use by itself or within the server-side language of your choice. Or if you're using PHP, I believe PHP's GD library is pretty popular.
There are no equivalents in other browsers. The closest you could get is using a graphics library like Canvas and manipulating the images in it, but you'd have to write the manipulations yourself and they'd require JavaScript.
filter is an IE-only feature -- it is not available in any other browser.
SVG filters applied to HTML content.
Only works in Firefox 3.1 and above, though I think Safari is heading in the same direction.
None that I know of. Filter was an IE only thing and I don't think any other browser has followed with similar functionality.
What is there a specific use case you need?
I'm afraid that you are pretty much out of luck with most of the cross-browser filter-type functionality. CSS alone will not allow you to do most of these things. For example, there is no way to invert an image cross-browser just using CSS. You will have to have two different copies of the image (one inverted) or you could try using Javascript or maybe go about it a completely different way, but there is no simple solution solely in CSS.
There are filters, such as Gaussian Blur et al in SVG, which is supported natively by most browsers except IE.
Pure thought experiment here, you could wrap your images in an SVG object on the fly with javascript and attempt to apply filters to them.
I doubt this would work for background images, though perhaps with alot of clever positioning it could work.
It's unlikely to be a realistic solution. If you don't want to permanently modify your source images, Rudi has the best answer, using server side tools to apply transformations on the fly (or cached for performance) will be the best cross browser solution.
This is a very very old question but css has updated to now support filters. Read more about it at
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Syntax
With a function, use the following:
filter: <filter-function> [<filter-function>]* | none
For a reference to an SVG element, use the following:
filter: url(svg-url#element-id)
Not really, and hopefully there never will be. It's not a web standard CSS feature for the reason that you're using CSS to format the webpage, not the browser itself. The day that other web designers and developers think they should style my browser how they wish and are then do so is the day I stop visiting their pages (and I say this as a front end web guy).