Just curious if there was a way to change font size on a website depending on the browser. I have an #font-face that works in Chrome and Safari, and then my alternative font choice is being used in Internet Explorer and Firefox. My alternative font choice renders larger than my preferred choice. Is there a way to change the font size for only IE and Firefox? Thanks!
You can detect the browser using JS and add a class to the HTML tag. You could use the following library for this: http://www.quirksmode.org/js/detect.html
If you add a Class for Firefox and IE, than in CSS you can use
.MSIE #mydiv
{
// Something only for IE
}
You can use CSS hacks or conditionals for load css files for a specific browser or css browser selectors...
for css hacks, check out this..https://github.com/ginader/CSS-Hacks
for css browser selectors, http://rafael.adm.br/css_browser_selector/
Related
Is there someway I can disable a particular CSS feature for my browser so I can view how the page will look in browsers that don't support that feature?
For instance I am using CSS grid. But I want to disable CSS grid feature in my chrome/firefox so I can see how my layout will look in browsers that don't support CSS grid?
using jquery you can detect which browser is being used by the website
if($.browser.chrome) {
$('#mytargetitemid').removeClass('.cssgrid')
} else if ($.browser.mozilla) {
alert(2);
} else if ($.browser.msie) {
alert(3);
}
this code removes the class tag of that item and hence css is not applied to it :-
$('#mytargetitemid').removeClass('.cssgrid')
hope this helps, revert if any confusion
you can check how many version of browsers support grid layout, compatability.
in IE browser you have the option to test as per versions but I doubt we have the same option in chrome.
This is just a hack and not a standard, but it could help -> #media-query swap.
All you need to do is to swap the queries, e.g.
Wrap your original query in #supports *not* (display: grid) {...} as if you're targeting non-grid browsers and of course, those browsers won't understand it anyway, then allow the other codes to run.
I have a form with text area and defined resize:both in css.
However, the resize handle / icon is missing on IE and Firefox but visible in Chrome. How can I fix this, or does these browser doen't support it.
Note that I'm using Twitter Bootstrap CSS as my CSS framework.
In Firefox 14.0.1, the handle disappears when you change the CSS border property on a textarea in any way - color, width, style, whatever. If you leave it as default, then the handle is visible. Could be a bug.
Check out the support table. No support in IE yet. Support exists in Firefox, and my test just confirmed this—but the handle is a little less noticeable than in Chrome:
Perhaps there is something else in your CSS code that overrides the setting, in a manner that affects Chrome but not Firefox.
I am using a wordpress, i use the Font Face tag in css file for custom fonts, it is working in all browser but not in IE please help me
Thanks
IE8 and lower don't support #font-face if your font is not in .EOT file format.
Assuming IE has a developer tool like Firefox and Chrome, hit F12 and select the CSS tab. Maybe your style is being overwritten somewhere or maybe IE is just a POC (I suspect the latter).
Like others have said. #font-face is a CSS3 attribute not supported by most older browsers. I would suggest using something like Font Squirrel to make it work with older browsers.
http://www.fontsquirrel.com/fontface/generator
Also more about #font-face
http://www.w3.org/TR/css3-fonts/#font-face-rule
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.