I've realised that my css won't work the same way in different browsers. Especially width and position differentiates between the browsers.
I've come to understand that telling the browser to chose different stylesheets depending on which browser's used isn't preferable. But how do I code things otherwise if I am to do it all in the same stylesheet?
Right now I'm struggling the most with an .mouseenter and .mouseleave animation where I can't position things to work even somehow correctly in all browsers.
I'm using em's to define distances/sizes, in case that would matter.
Some ideas for your reference:
It's really true that Self-created css and javascript may not support different browsers very well all the time, that's why ppl shift to use css framework(such as bootstrap) and javascript libraries (jquery etc).
but if you don't want to use framework, then u may do css hack to your css.
such as css piority overrides,
browser compatibility / detection tags is widely used.
#media query & reloading page for different css on different resolutions (used in many responsive sites)
Related
I have added a media="print" stylesheet, I have added *{-webkit-print-color-adjust: exact;}
But only chrome displays backgrounds (images and colors)! Is there a solution to fix it without checking “Print background colors and images” ?
As noted on MDN
This feature is non-standard and is not on a standards track. Do not
use it on production sites facing the Web: it will not work for every
user. There may also be large incompatibilities between
implementations and the behavior may change in the future.
As such it should not be relied upon, indeed support in Chrome is marked as 'Buggy', all other browsers are not supported, note that the use of the -webkit- vendor prefix denotes intended 'support' in webkit browsers, IE does not use the webkit engine.
Typically, you are not able to determine / override / code the option to print background colors and images. One approach is to utilise other properties / elements, such as using img elements for actual images, or using pseudo elements with extremely wide borders to mimic background colors. However, often neither is practical.
Unfortunately support of even the print or paged media modules accross browsers is terrible. Indeed, the CSS working group has a large discussion around the whole topic
In my website, it looks great on any browser but Internet Explorer. I know that older versions Internet Explorer doesn't support CSS3, so I was wondering if there were equivalents in HTML to these methods: max-width:, border-radius:, box-shadow:, and transition:.
Any help would be appreciated.
For border-radius and box-shadow there is http://css3pie.com/ but that requires Javascript in IE. For a HTML only solution you have to use images, i guess.
You are asking for a way to get some of the newer features of CSS rendered in a browser that doesn't support CSS (or let's hope you are ignoring browsers that old and instead working with a browser version that do some CSS, but not enough for your tastes). Those browsers are outdated and you are not going to get it work just by avoiding css.
If you go far enough back, you may actually end up at a point in time when there were things that were possible in html weren't in css. However, it has been quite a while now that CSS is your best shot at getting things like that to work. If it doesn't work, it usually means that the browser doesn't support it at all, not that it doesn't support it through CSS.
Of course, you can work some magic and try to fake things with javascript, but it just isn't the same.
I recommend using modernizr. It detects if a browser supports different css3 (and html5) features and, if it doesn't, you can conditionally load javascript as a fallback solution.
Internet Explorer 9 supports max-width, border-radius and box-shadow, but not transition.
Personally I don't think CSS should have transition (or animation) as styles should affect how content is displayed, not how it behaves (I am also against the behaviour IE extension for this reason).
Overall, these styles you are asking for are aesthetical, and shouldn't really be a major issue if they aren't supported by the browser your user is on.
Is it at all possible to assign css styles to only display in sepcific browsers? I know IE can be but Im meaning safari and google chrome? The problem is I have currently set some CSS styles to my site which looks great in firefox but seems to look totally ugly in safari and chrome and I'd really like to change that if possible
I agree that you probably should fix your CSS and HTML. Chrome and FF should render the same generally.
Make sure your HTML validates.
However, if you are in a pinch -- this script works great: http://rafael.adm.br/css_browser_selector/
Some CSS3 properties are with the prefix -moz, -webkit, -ms. Other than that it's only possible to detect the user browser version, type and then serve the different css sheet accordingly. Remember, a stylesheet does not necessarily have to have a .css extension, so you could write a PHP script that prints out different CSS for different browsers when included.
Wouldn't recommend it, though. You should simply fix your CSS, before relying on browser detection.
Is there any problem If i use position:absolue property in HTML 5 ?
position:absolute;left:somepx;top:somepx;
Will it work on all browsers or does the syntax go upside down ? Im using the
<!doctype HTML>
and developing the html using images and with some text, Just placing them in a good looking way using the position:absolute.And im developing using my internet explorer probably its version 7 I think so.But im worried will it work on other browsers like mozilla and google chrome with no error.Will it remain the same way on all browsers? becuase the stackoveflow or google any webpage looks in the same way in all browsers.I just wanted to know what standards they follow that makes them look same on every browser.
Please just let me know is there any harm or pitfall using the position:absolute.Thank you in advance
It seems you make some mistakes when you build your websites.
using absolute positioning where you shouldn't. It is not appropriate to use position: absolute to make a complex layout. Consider looking for some tutorials to learn how to build a layout using especially float, clear, margin and padding CSS properties. Use absolute positioning only where it is explicitly required.
using non standards-compliant browser during website development. IE7 is quite old browser with buggy support for web technologies. This may cause that your website will display fine only in IE7 and messy in every other browser. What you have to do is to develop website in standards-compliant browser (no matter what browser, just make sure you use the latest version available) and then check the website in older browsers (and possibly fix bugs that appear). Don't forget to check the website in all browsers used by your visitors. Compatibility tables like those at QuirksMode are often useful.
Back to original question, browsers don't distinguish between versions of HTML (there is just standards and quirks mode, but you don't need to care about them because you're using doctype that triggers standards mode in all browsers); so there's nothing more to be aware of. Absolute positioning should (and in most cases, will) work well in IE8+ and all widely used versions of Firefox, Chrome, Safari and Opera. Once again, you're supposed to test your website in all widely used browsers; you'll discover possible browser bugs and incompatibilites then.
Another interesting thing to look at is this:
http://ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html
It may very well be available soon and will probably be a lot better for what you want. For now, do not JUST use Position:absolute, as people have said, it is a really bad way of positioning things and should only be used under very specific circumstances.
Well it has nothing to do with HTML5, it is basic positioning.
And it is not a straightforward process to get your site to display the same in all browsers, you should take a look at resetting style sheets or just test your site in a lot of browsers.
Especially older browsers have a way of changing your design.
absolute positioning is part of css3. html5 is just a combination of javascript+html+css
with unique features. so.it should work with all the browsers. but how all the browser will display, you need to chek it in chrome,mozila,safari,opera...etc in recent versions.
browser compatibility may be issue some time.so,don't worry ,it's better to chek and fix the variations.
I have a site, here, that I'm working on which uses some html5 and css3 elements which obviously do not load correctly on certain browsers and i have a few questions about what I can do and I don't have much experience with any codes like php or javascript. these questions are kind of a mess as well - I've been searching all over not really sure of what I should be looking for.
How would I go about creating a popup based on which browser is being used, if possible?
I understand that I can use conditional comments for IE but IE is not the only unsupported browser. Is there a way to activate certain elements, or div's depending on the browser?
How would I go about creating a version of the site that would be shown instead of the unsupported version?
Is there a better way to do this?
These questions may not be the right ones - if not and you know an answer to the question I'm looking for, please, go for it! Thanks!
There are a few tools I would recommend:
Modernizr
Feature detection, allowing you to target features in CSS and JS. It doesn't add features, just lets you test for them.
Includes HTML5shiv functionality Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
HTML5shiv
Very small, allows you to use html5 elements in IE, nothing else.
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
ie7.js (and ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
You can use the moderizer script to bridge the gap for html markup.
I wouldn't really worry about CSS3 working or not in IE. If you have a supported browser you get an enhanced user experience and if you don't you would just get a normal one.