I have a very normal issue.But I couldn't find any answer.I made a simple PSD to HTML.I tried to make it cross-browser compatible.But I couldn't do it.So that's why I have a question.If I make a template in IE or Safari.Is it automatically compatible with all other browsers? Because Safari and IE are the worst browsers.Need suggestion from experts.
Thanks in advance
try some compiler like prepros which'll automatically add browser prifixes
most of css2 properties works correctly for all browsers but the real problem is in css3
so you can use each browser code
for example we need to use tranisition the code will be
-webkit-transition: all 0.3s linear; /*chrome and safari*/
-moz-transition: all 0.3s linear; /*firefox*/
-o-transition: all 0.3s linear; /*opera*/
-ms-transition: all 0.3s linear; /*internet explorer*/
-transition: all 0.3s linear; /*for all new versions of browsers*/
Related
I am having some trouble with the transition property trying to include the all keyword.
I've included a fiddle and I feel I'm either making a simple (or stupid) mistake or something? I've seen the all keyword work fine? And it seems to working fine on the .on class when selecting them?
Why is the base classes that use the
// not working
transition: 0.2s transform, 0.2s all 0.4s;
// working
transition: 0.2s transform, 0.2s top 0.4s, 0.2s margin-top 0.4s;
https://jsfiddle.net/us2196np/2/
I think it's about priority
look
transition: 0.2s all 0.4s, transform 0.2s ;
i mean fisrt it sets transition to all styles then it rewrites transform
I'm trying to add an accessibility option to a website, where you can click some buttons ' A A A ' and these would change the size of the text on the whole site, using HTML5 and CSS3 only. I don't want to use jQuery or Javascript to do it.
Based on this idea: http://www.dynamicdrive.com/dynamicindex9/textsizer.htm
Any help would be great!
Maybe you can do it like this:
#element{
font-size:12px;
}
#element:click{
font-size:14px;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
I have a problem which I really hate.
In Chrome all my select elements in my forms are erratic.
When I click on the select and then move cursor down then the
focus jumps on the elements very strangely.
If I wait about 1 second after clicking on the select box then
the behaviour is OK, the focus is on the same element as the cursor (which is not the
case if I don't wait)
Just pure HTML no JS.
All forms are Zend Forms.
FF, IE, Opera are OK
Thanks,
David
Finally I have found it.
I my CSS
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear
changed to 0.01 and now everything is OK.
Regards
I have the following code: http://jsfiddle.net/8TG8L/
On another part of my HTML I can get the transition CSS to work great, but here on the right hand side I cannot get the transition to have any delay.
Relevant code:
.home_subvid_hover {
background-image:url('http://www.ptroa.com/images/video_hover.png');
/*background-repeat:no-repeat;*/
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
EDIT:
To clarify, please look at this code: http://jsfiddle.net/9UuY7/
That one works although it's the same principle as the first one, why is that?
Thanks,
The reason the background isn't animated, is because the backround-image isn't set on the initial class .home_subvid.
You can't animate background-image:none to background-image:url(...).
If you try this, it's gonna work:
.home_subvid {
background-image:url('http://placehold.it/1x1/000');
background-size: cover;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.home_subvid:hover {
background-image:url('http://www.ptroa.com/images/video_hover.png');
/*background-repeat:no-repeat;*/
}
FIDDLE.
You can't transition background images from none to an image, see this document on MDN. Transitioning from image to image doesn't have amazing browser support either; as far as I know it's only supported in Chrome.
You can, however, create a similar effect with different markup/CSS.
How about an element made invisible with opacity: 0; and then transitioned into opacity: 1; when hovered?
Your css is changing the background image from nothing to an image, which the current generation of CSS can't animate.
I am working on a Drop-Down-Menu only using CSS & HTML5 (no JavaScript) in my personal website. Here it is: http://davidvalles.cu.cc
If you enter with Firefox, the menu works great (it is the one called "Secciones"): when you put the mouse over the "Secciones" div, the menu appears with a transition.
But if you try it with Safari or Chrome, it will work normally, unless you put the mouse UNDER the "Secciones" div. In that case, menu will appear normally. And I don't want the menu to open in that case. I only want it to open when you put the mouse over the "Secciones" link (all the box that contains the Secciones text).
What am I doing wrong? Why does the menu work perfectly in Firefox but not in Safari?
Could you take a look at it? Thank you, and sorry for my poor English, I'm learning. Please, correct me :)
Your easing? Is "ease" a easing value?
-moz-transition: opacity .25s ease;
-webkit-transition: opacity .25s ease;
-o-transition: opacity .25s ease;
-ms-transition: opacity .25s ease;
transition: opacity .25s ease;