I am quite new in CSS3. W wanted to do a simple marquee but i dont want to use tag and JS/JQuery. Perfect sollution for me is marquee in CSS3 but it's not sliding in Chrome and Opera (in Firefox and IE works fine). What am I writed wrong?
This is a simple example of my code:
http://pastebin.com/fG8As6i7
Chrome seems to have abandoned support for the CSS3 marquee stuff. I am using my Raspberry Pi to display stock data in a CSS3 marquee, and that has been working fine - recently, I discovered that on my laptop (with latest Chrome) the page is no longer working. When I check in developer tools, I also see that the marquee properties like (-webkit-)marquee-style are now unrecognized ("Unknown property name"). My Raspberry Pi has an older version of Chrome in which this still works. As an alternative, use the element, which seems to be okay in Chrome currently (v32 Beta). However, it probably won't last. The WhatWG standard already declares it as obsolete: http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html
The only solution that will work in the long run is based on JavaScript and/or a custom CSS animation (for example with keyframes).
EDIT: Sorry, didn't read enough... Apparently, you're actually already trying to get it done with CSS animations.
Related
I am using wkhtmltopdf 0.12.1 (with patched qt)
While most CSS3 stuff - at least what I use - works fine, some need a '-webkit-' prefix, like transform
Others, like border-image seem to work only with the short form (and prefixed). ie. border-image-xxx, seem not to work, SVG seems not to be supported at all
So the question: How can I find out, what level of CSS3 support wkhtmltopdf has? Trial and error is very time consuming, and probably erronous, because of typos.
edid: based on answer
I am testing with Chrome, FF, IE, Opera & safari (as possible with windows), wkhtmltopdf is like an own browser - sorringliy its seems not big enough to get a place in 'official' lists
It uses CSS2 - to my knowledge, no CSS3 properties will work.
wkhtmltopdf uses webkit. This is used by Safari and Chrome as well.
Details here: https://en.wikipedia.org/wiki/WebKit
So if you check http://caniuse.com for these browsers you should get a good result.
Final tests are still a good thing though.
Some examples of questions asked here
wkhtmltopdf css sizes in cm/mm
Does wkhtmltopdf respect css font color?
Does wkHTMLtoPDF support #page rules?
It seems I encountered something in CSS a couple years back, on end or stop, some term or syntax, for turning off an animation after a time, supplied in the declaration... but not having any luck on google finding that. Is there a way to snap back/undo a transition while :hover state still active?
I'm pretty sure that animation-play-state would be what you're looking for. Note that no browser supports this property. Safari, Chrome, Opera and Firefox do support it with the prefix however, but note that the prefix -moz- (for FireFox), -webkit- (for Webkit-based browsers like Chrome and Safari), and -o- (for Opera) is mandatory for the code to function, or to be recognized at all.
For a more cross-browser solution, you'd probebly find yourself turning to JavaScript, or a library that utilizes it. For example, a JavaScript function() could be called during execution, triggering the stop of the animation, with the delay using setTimeout. This would definitely be something that wouldn't be to hard at all to accomplish.
You were mentioning in your question a stop script. jQuery (a JavaScript library) does have something of the sort: http://api.jquery.com/stop/. The only problem is that the transition has to be triggered using the transition jQuery code, but that shouldn't be so hard considering that jQuery is a short-hand coding language, and is really well documented.
Tell me if this helps.
And don't forget to accept this answer as correct if it helped. :)
I have a question regarding css3 animation. I know that it works well in all browsers except Internet Explorer(IE-7/8/9). How can I make it work in the older versions of IE as well?
You may find useful cssSandpaper – a CSS3 JavaScript Library.
I have been following mozilla developer network's docs and created a transition for my images to change. They seem to work fine in Chrome (19?) but not in Firefox 11 (or any other browser).
I have created a test case here on jsfiddle - http://jsfiddle.net/9nevB/1/
I've tried this in many different ways and still can't get it to work on firefox.
Any ideas?
Thanks
According to the CSS3 specification, background-image is not animatable. Browsers may provide this implementation, but it is not standardized.
I have a webpage which I have made entirely as svg (apart from the html to load the svg). So far, so good, and you can see it here (not yet complete): http://kitandmarcin.us/svgcontainer.html (it's for my own wedding, so "the client" doesn't care that not all users are getting the same experience).
This works just great in Firefox, Safari, and Chrome. It basically doesn't work in IE (including IE9), or Opera. I haven't tested anything else.
My question is, what is the best way to handle giving IE (and, I suppose Opera) users either (a) a redirection to a different page, or (b) show them something else (probably a screenshot).
I would prefer not to use javascript, because I suspect if they are already having trouble viewing the page, problems on their end with javascript are quite possible.
It works fine in Opera 11 / Windows.
You should consider just making it in good old HTML/CSS - it's not a particularly complex layout.
Alternatively, use javascript on your parent page to redirect users of IE to a static PNG version of your SVG.
IE8 simply does not support SVG without a plugin - javascript will work just fine on the page. However, SVG is supposed to work in IE9, so I'm not sure why yours doesn't. I don't yet have IE9 here, so I can't test.
ForeignObject is probably the answer why it doesn't work. Given that your svg is quite simple, I'd suggest removing the foreignObjects and using svg text and tspan elements instead. That should make it work in all browsers. And seeing how you used inkscape to create the svg it could have done all the linewrapping etc for you anyway.
From other answer about flow-elements in inkscape:
Inkscape can generate <text> and <tspan> for
you quite easily, just don't click and
drag an area but instead just click
where you want the text and start
writing, then press return where you want a
new line.
I'm not sure if IE9 supports foreignObject.
There's a way to do automatic linewrapping in svg tiny 1.2, which is supported in Opera, a workaround solution could look something like this. But to get IE9 compat too, you'll probably have to go with text+tspan.