Well I've had a fun-filled 24 hours. Since asking this question yesterday: http://tinyurl.com/nkoqxfg I've been trying to isolate the problem, and finally I've narrowed it down to the following:
Modernizr is incorrectly applying a class of fontface to the HTML element in IE8.
Here is my site, with everything else stripped away: http://tinyurl.com/ose6pj8
Please take a look at the source code. Notice the last two CSS rules:
nav li a {
color: #FFF;
font-size: 4px;
}
.fontface nav li a {
font-family: 'Qwigley';
font-size: 30px;
line-height: 56px;
}
In any modern browser that supports #font-face, you should see the menu styled with Google font's 'Qwigly' script, and the correct font-size of 30px. In IE8 and any browser that doesn't support #font-face, you would expect to see a tiny font-size of 4px. (Modernizr in this case should apply a no-fontface class to the HTML element)
However, this is not the case. Mordernizr is incorrectly applying the fontface class, and as a result I'm getting huge 30px Arial text. Just checked, and the same problem is occurring with IE7.
Why?
in IE8 and any browser that doesn't support #font-face, you would expect to see a tiny font-size of 4px. (Modernizr in this case should apply a no-fontface class to the HTML element)
IE 8 does support #font-face – so expecting Modernizer to not set that class is just where you are going wrong here.
The caveat is that IE < 9 only supports fonts in EOT format – so see to it that you embed that version in your font embedding as well;
Or use a CSS selector that applies your custom font only if the lt-ie9 class that you set for your html element via conditional comments is not present, something like
html:not(.lt-ie9) .fontface nav li a { /* … */ }
(IE only supports the :not() selector from v9 on anyway.)
Related
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
But are those styles hardcoded or is merely adding a prefix address that browser?
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px; not that I'd want to, just wondering.
And does the prefix approach work cross browser? I'm wondering because Internet Explorer.
Finally, will margin:10px ever knock out -moz-margin:10px? As in, "We, Mozilla, finally support margin so we are going to ignore all old -moz-margin tags and will just use the value in the margin tag".
It's very bad habit to apply css for specific browser. But there are solutions also:
Only Moz:
#-moz-document url-prefix(){
body {
color: #000;
}
div{
margin:-4px;
}
}
chome and safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #90f;
}
}
Below IE9:
<!--[if IE 9]>
body {
background:red;
}
<![endif]-->
I recommend don't use this moz, and safari prefix untill and unless necessary.
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.
As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just property wouldn't work so we'd use -prefix-property for certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The browser-specific prefix version thing doesn't exist.
Hope this answers your question.
As a workaround you can detect browser version in JS, and add it to class of your root element. You can detect browser through user agent , and there are multiple libraries in npm.
Using this class as a base, you can target browsers
function detectBrowser() {
if (navigator.userAgent.includes("Chrome")) {
return "chrome"
}
if (navigator.userAgent.includes("Firefox")) {
return "firefox"
}
if (navigator.userAgent.includes("Safari")) {
return "safari"
}
}
document.body.className = detectBrowser()
p {
display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
display: block
}
My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>
One of the weirdest CSS issues I've seen. The .product-bottom and .product-title classes have the font-family: Roboto. This displays fine in IE and Chrome. Inspecting the elements in Firefox, the font is apparently used on the element and is successfully used throughout the site in other elements.
Editing the font-family attributes when inspecting the element has no affect on it. The computed css values show !important is not used. When used in the inspector on font-family, it has no affect. There are no jQuery or CSS errors, though there are plenty of CSS warnings.
The site is [removed after fix].
Screenshot of the font issue in FF. Problem text is: "Grey Hair Color Body Wave Human Hair Weave"
Disable
.product-title {
text-transform: full-width;
}
and it looks fine. The full-width value is only experimental and mainly supposed to be used with square letters like in Chinese.
Replease this css:
.product-title {
text-transform: full-width;
}
with this:
.product-title {
text-transform: capitalize;
}
So I was tweaking the Firefox built-in reader mode using Stylish extension. The first thing I did was to change the font:
body.loaded.serif div#moz-reader-content, h1#reader-title, div#reader-credits{
font-family: "Marion";
}
It worked fine. Later on I wanted to tweak the links:
a{
text-decoration: none;
}
And the links stay unchanged. I can see in Firebug that this declaration is overriden by the default style declaration (as in "aboutReaderContent.css") which also used a single selector. Then I tried making it more specific:
html body.serif.loaded div.content div#moz-reader-content p a{
text-decoration: none;
}
Still no effect. Firebug says it was still overriden. I had to resort to !important.
My question is, why did this element does not follow the specificity rule? As I understand it, even in multiple files, browser will follow the most "specific" selector regardless the order these files are loaded. To add to my confusion, the first tweak actually overrode the default stylesheet, but that's in another file "aboutReader.css". What am I missing?
Is it possible to override font boosting in mobile chrome?
I searched the internet before ~including stackoverflow~.
I found that some people say it's impossible, and I also found meta tag that helped the text but also decreased the area of the text... which is not good..
Will appreciate your help..
adding following line to my reset.css worked for me
html * {max-height:1000000px;}
There is no real possibility for disabling font boosting. There may be some hacks, but they are meant for something different and, in fact, do something different.
Try text-size-adjust:
html {
text-size-adjust: none;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
}
It looks like there are a few people that have methods for making it work.
Add some CSS rules or give parent element width and height.
It is a webkit official bug. You can check on Webkit official site
You have to target only specific element where you have to override font boosting rather than targeting unwanted elements. i.e.
p {
max-height: 999999px;
}
Matt and Kundan Sankhe answer are the best solution at the moment.
.element { max-height: 999999px; }
If the problem still occur try add this inside the head tag:-
<meta name="viewport" content="width=device-width, initial-scale=1">
But bear in mind that this can cause problem to image tag or image background-size tag.
Android Chrome only applies font boosting to elements with dynamic height. As soon as you specify a height,max-height or line-height, font boosting is not applied. But you should be careful of the inline element like span whose height or max-height property is invalid. In that case you can set the display to inline-block as the below code or other box types whose height can be setted.
span {
font-size:12px;
line-height:12px;
display:inline-block;
}
For desktops, and likely mobile (haven't tested mobile), you can disable font size boosting in Chrome and FF by setting a base font size on the HTML element. For example:
html {
font-size: 16px;
}
This is less hacky than max-height. But, still dirty from an accessibility standpoint.
You can also use jQuery to set this if you have to.
Elements with css font-size <12px doesn't have effect in Google Chrome - remains font-size 12px.
What should I do?
My Google Chrome browser uses default settings. My version is 4.0.249.89.
I am using Windows XP.
You can paste the following code to your Google Chrome to test it:
<html>
<body>
<p style="font-size:6px;">test 6px</p>
<p style="font-size:7px;">test 7px</p>
<p style="font-size:8px;">test 8px</p>
<p style="font-size:9px;">test 9px</p>
<p style="font-size:10px;">test 10px</p>
<p style="font-size:11px;">test 11px</p>
<p style="font-size:12px;">test 12px</p>
<p style="font-size:13px;">test 13px</p>
<p style="font-size:14px;">test 14px</p>
<p style="font-size:15px;">test 15px</p>
<p style="font-size:16px;">test 16px</p>
</body>
</html>
Results from different browser:
disable the auto adjustment by following style.
* {
-webkit-text-size-adjust: none;
}
-webkit-text-size-adjust is no longer working after Chrome 27.
Try using transform to refuce font-size forcely.
font-size:12px;
transform: scale(0.833);/*10/12=0.833, font-size:10px*/
According to http://www.google.com/support/forum/p/Chrome/thread?tid=389f306a52817110&hl=en Chrome supports a minimum font size. If you open "Documents and Settings\User_Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences" in a text editor, do you see something like the following?:
"webkit": {
"webprefs": {
"default_fixed_font_size": 11,
"default_font_size": 12,
"fixed_font_family": "Bitstream Vera Sans Mono",
"minimum_font_size": 12,
"minimum_logical_font_size": 12,
"sansserif_font_family": "Times New Roman",
"serif_font_family": "Arial",
"standard_font_is_serif": false,
"text_areas_are_resizable": true
}
}
Closing Chrome, changing the minimum font size, and restarting Chrome may help.
Chrome has a minimum font size setting. Mine was set to 11px (by default) so I had to change it to view smaller font sizes.
To change the minimum font size in Chrome go to: settings > advanced settings > web content > font size > customise fonts > scroll down to the bottom and you will see the 'minimum font size' slider.
this should not be correct, you probably have an element overwriting your current given attribute.
like this:
body {
font-size:10px;
}
#content {
font-size:12px;
}
Is there a minimum font size preference? Is it set to 12px? Is page/text zoom enabled? Do you have any kind of Chrome plugins that alter page contents?
Same for safari. I guess this is set to 9px for accessibility reasons. The trick is to not rely on making your fonts that small, so that you are blowing them up in css rather than reducing them. This is of particular relevance if creating your own font using something like icnmoon. So, here it is best to reduce the glyphs sizes in the font, so that you are setting them quite large in your css and you are avoiding setting them to below 9px if the user 'zooms out'.
Interestingly font-size: 0 still works even if the minimum font size is set to 9px in your browser preferences.
With regards tablets and smartphone and other devices, it may be possible to use the following to avoid automatic text size adjustments using the following:
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none,
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-size-adjust: none;
This may actually break the accessibility of your websites on these devices but as far as I know there is no way to adjust your browser text size as it stands on these devices. They only seem to be adjusted automatically, depending on the situation which can be a bit of a mystery. These commands may prevent that, but i think the default minimum font that is set in your browser preferences may override that setting anyway, at least in some browsers.
what happens if you make the < P > tag a < SPAN > tag?
is it possible you have defined your < p > tag somewhere along?
It works for me in Chrome 4.0.249.78 (36714) , could you be viewing a cached copy?....Try emptying your page cache (I've found chrome very fond of its cache)
Chrome doesn't let you set the minimum size less than 6 point.
And text is legible A LOT smaller than that on Retina displays.
It works for me.
Try to:
use webdesigner tools, to check what css affects your element
post html and css aswell, so we can maybe figure out more
Edit:
Latest Chrome (stable) renders this this way:
(source: kissyour.net)
Chrome and Firefox now allow a minimum font size setting of zero. Chrome 73 had downstream problems with this, and since then Chrome changed their policy and user interface for this setting. I don't know the history on Firefox, and I don't know the state of this setting on Safari or other browsers.
You can use css property zoom (https://developer.mozilla.org/en-US/docs/Web/CSS/zoom)
By setting zoom property equals to 0.25
all elements will be looked 4 times smaller,
so 12px font text will be looked like 3px font text.
.text {
zoom: 0.25;
font-size: 24px;
}
text will be looked like font-size: 6px; text.
But this property isn't supported by firefox.
Have you tried putting an "!important" clause behind the font styles? This would override everything else. At least then you would know where to look for the problem. Like this:
<p style="font-size:6px !important;">test 6px</p>
<html>
<head>
<style>
#text {
transform-origin: top left;
background: #aed5ff;
}
</style>
<script>
window.addEventListener('load', function() {
var node = document.getElementById('text');
var fontSize = node.style.fontSize.replace(/[\D]+$/, '');
if (+fontSize <= 12) {
node.style.fontSize = '12px';
node.style.transform = `scale(${fontSize / 12})`
}
});
</script>
</head>
<body>
<p id='text' style='font-size:10px'>test 10px</p>
<p style='font-size:12px'>test 12px</p>
</body>
</html>
you can use
body {
font-size:125%;
}
to set 0.5em=10px.