I set initial font-size of body to 62.5% so to be equal to 10px. Then I set elements font-size to 1.2rem, 2rem and so on. Everything works fine.
Now I want to set pixels instead of rems for IE8, not to be bothered too much by dealing with its quirks. So, I add a new ie.styl file that I conditionally attach if it's IE. Inside it I want to change rems to pixels wherever rems are in original file. My question - is there some good way to do it in automatic manner, like what nib does for browsers-specific prefixed CSS options?
So, as a result, I add something like font-size units(1.2) in original file, and it generates two files - style.css and ie.css, where font-size: 1.2rem; will be in first file, and font-size: 12px; in the former one?
Best you can do is declare both, IE will use the fallback
.font {
font-size:16px; /* ie fallback */
font-size:1rem;
}
Related
I am using Chrome and default font size is 16px as default.
I have an idea to adjust font-size according to screen width via media queries.
I saw some CSS experts adjusting default 16px font size to 1.6rem based system.
So idea behind scence is to equalize 1rem to 10px and use everything as rem then if needed to adjust something change only font-size so all measurements will change at same ratio.
See this example
* {
font-size: inherit;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>Hello</p>
<input type="text" value="Hello">
Can anybody explain why font-size in input is greater than p ?
Also if I try to obtain font-size in dev tools I can't get any value.
If I try to get it via JavaScript like this
document.getElementsByTagName("input")[0].style.fontSize
I get ''
You get a null result on looking at the style because the inline style has not been set.
The two Hellos are not different font sizes - both are 16px, but the paragraph is Times New Roman and the input it Arial - set by the default within the browser, at least on my inspection in Chrome/Edge on Windows10.
It is worth using your browser's inspect facility to see exactly what is setting each of the styles, and it will show you the computed style as well.
I have problem in implementing font-weight: 100.
I want the my sentence to be ultra light/thin, but when I'm using font-weight:100, is not working.
What should I do? Do I need to import or install something?
I am using reactjs.
<p class="thin">Test</p>
.thin {
font-weight: 100;
}
In order to use specific font-weight, your font must support it, if it doesn't, then any value between 0 and 600 (not included, normal value is 400) will be interpreted as normal, and any greater value will be bold (bold normally is 700).
If your font doesn't have a light/thin variant, then I'm afraid you can't get a thinner font weight than normal (400).
EDIT NOTE : For fonts than only are normal (400), then bold is generated by default by the browser, for instance :
#import url('https://fonts.googleapis.com/css?family=Roboto');
p {
font-family: 'Roboto';
font-weight: 700;
}
<p>This is bold, but I didn't loaded Roboto 700, only Roboto 400.</p>
In this case, the render may differ from one browser to another, although it usually don't.
If you select a font on google fonts you have two choices: Embed it with the default embed code or customize it (in the overlay you get after you select a font)
If you customize it you have the ability to select which font weights you want to include. not every font supports every font weight. if you can't select it, it doesn't exist for this font.
I've put a little test case together here:
http://jsfiddle.net/D4sLk/2/
Basically I have the following font sizes set:
* (everything): 12px
container: 20px
test element: inherit
The DOM hierarchy is: container > test element.
In IE9, the font size is reported as 12px using testEl.currentStyle.fontSize but is displayed as 20px. In Chrome and FF it seems fine.
Are there any workarounds to this issue? Or have I done something really stupid?
Try using font-size: 1em instead of using inherit.
The reason for this is because I've found that inherit seems to have issues in IE. It rendered fine when I looked in IE9, however for some reason testEl.currentStyle.fontSize and $(testEl).css('font-size') both returned 12px as well.
I've read that to use font-size: inherit in IE8, you would need to specify a !DOCTYPE, however it should be fine in IE9 (http://www.w3schools.com/cssref/pr_font_font-size.asp). For some reason, testEl.currentStyle.fontSize and $(testEl).css('font-size') are not picking up the correct values in IE9.
When you set the font-size to 1em, you are sizing it up to 100% of the parent font-size, which in this case results to 20px. From http://www.w3schools.com/cssref/css_units.asp:
1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
As a result, computedStyle.fontSize and $(testEl).css('font-size'), should both return 20px.
Hope this helps!
I'd like to be able to tell if specific CSS properties (width, height, margin, padding, font-size, …) were set by the page author for a DOM element. My goal is to not change elements that have had their dimensions explicitly set, but to change those that have not.
function isPropertySet(elem, "width") should return true if the page author set the width CSS property either inline (style="width: 100px;"), or via a stylesheet.
This is not straightforward because the layout engine infers these values, and it seems that however I try to access them the browser has supplied values.
For instance, I've tried getComputedStyle(elem).getPropertyValue("width"), but this returns the computed width (not surprising given the name).
The style property, e.g. elem.style.width, isn't sufficient because it doesn't include properties set in stylesheets.
Before I go to the immense pain of searching through the stylesheets, does anyone have a better way?
Thanks!
If you want to supply default style set for the elements which were not customized, than the easiest way would be to create your own stylesheet and put it at the top, before any other CSS files. This way, every element customized elsewhere will overwrite your default styles. Be careful with the cascading order: not only your styles should precede every other, but the selectors should also be general enough.
If, on the other hand, for some reason you want to know through JavaScript whether the element was customized, then it's not possible, unless you want to compare the particular style with the default one, given that default styles may vary from browser to browser. For example, in Firefox, the default style for <h1/> is:
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: .67em 0;
}
while Chrome has a slightly different style:
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
This creates a problematic edge case. Imagine I want all <h1/> be font-weight:normal; font-size: 200%;, but there is one specific title on one specific page which I want to be exactly 2em and be displayed in bold. You'll think that the title is not customized, and override its style, while in fact, it was customized, the size and weight being set on purpose.
If you aren't worried about inherited styles and only the specific DOM element then maybe you can dynamically create the specific element&classname (so it only has CSS styles) and then examine it's width using the above methods and compare it?
The best way I have found to answer this question from JavaScript is to create a temporary element, that is not attached to the dom, and read my default values from that. I then test the default values against the values read from the element I'm testing (using jQuery or getComputedStyle) - if they compare then it's a best guess they haven't been set. Obviously this has a downside in the fact that if the element has had it's property set to the exact same value as the default you can't tell the difference.
Something like this
function hasDefaultStyle(elm, prop) {
var def = $('<'+$(elm).attr('tagName')+' />').css(prop);
return $(elm).css('prop') == def;
}
When dealing with different dimension metrics i.e. percent, cm, em and so on - these have to be dealt with in a different way—on browsers other than FireFox at least—due to the computed problem you mention.
FireFox does the right thing in my opinion and that when you request styles from an element that hasn't been placed in the dom it returns the original values i.e. like 50%.
For more information on how to solve at least the percent problem you can see my answer here:
Determine whether element has fixed or percentage width using JavaScript
It is rather ridiculous that such methods are necessary however :/
I have this code:
function AUTADIV () {
var BRW = window.outerWidth;
x = (BRW/1280) * 20
document.getElementsByTagName("a").style.fontSize = x
}
and the tag <a> is already under this class in a .css file:
a {
position:relative;
z-index:1;
color:White;
background-color: transparent;
font-size:20pt;
text-decoration: none;
text-shadow: blue 0em 0em 0.4em
}
When someone with a larger screen sees my site, the background does fill it all, but the font is too small. Is there any way to make it automatically resize? If not, how can I change font-size:20pt by JavaScript? My code only works if the font-size style is inline, and I need it in the CSS script.
I have found that the code I need activates with the onResize event.
If it needs to be in the CSS then it might be difficult to do. If however, it's able to be changed dynamically with JS then you can accomplish this with a simple test like:
(I'm using jquery)
$.getDocHeight = function(){
return Math.max(
$(document).width(),
$(window).width(),
/* For opera: */
document.documentElement.clientWidth
);
};
if($.getDocHeight>threshhold){ // some threshhold of a max width
$('a').style('font-size','40pt');
}
This can be done in regular js as well. It's hard to determine the width on all different browsers, thats why I included the function. But once you have the width, you just need to do a simple check and you can bump up the font-size style for your anchor tags. I suggest having static sizes so that the font is more predictable and doesn't scale with your page size.
This is a best practice when considering different types of users (like mobile users where you definitely do not want the font to be so small that all of it fits on one page).
Src for code: http://james.padolsey.com/javascript/get-document-height-cross-browser/
You may modify the rules by accessing the CSSRule-Object.
Details:
IE<9 : http://help.dottoro.com/ljcufoej.php
Others: http://help.dottoro.com/ljdxvksd.php
You might get better results using a media query:
#media all and (max-width: 1280px) {
a{font-size:12pt;}
}
You can repeat this for increasingly smaller sizes. It won't smoothly transition, but it doesn't require JavaScript (and besides so much changes when you resize a window that a jump in text size probably won't be noticed).