I have come to the understanding that Pt should be used if you want something to be printed. Easy enough. Px could be used due to its ability to scale with a browsers zoom function, but for the most part frowned upon.
My confusion comes in in regards to % and ems. The below article, and most others I read, seem to suggest that ems is the way to go for the future. It seems crazy though that in order to get a specific size you would need something like 1.235em or 0.675em.
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs
The article mentions to use percent to set the initial size of the cite to then make em easier? This does not make since to me.
Ultimately my question is this, what limitations or issues would I run into if I were to only use percents to set my sizing? (Is the same true, em vs %, for sizing divs?) Any clarification that could be provide would be much appreciated. I feel that I am missing something.
The only issue I know of is the browser client font size setting as mentioned in the article.
-> from a cross browser consistency point of view you might just stick to %.
Scaling the initial font size using % gets you the advantage that 1em then equals that predifined size.
Maybe this might help you.
Related
I was told using vh and vw causes a repaint, thus causing hits to performance, but I couldn't find sufficient research on this topic.
Additionally, in what context should each measurement be used? For example, if I wanted to use vh or vw on something like padding, is that wrong? Is it better suited to use it for positioning purposes?
I hope this question makes sense, because I'm genuinely curious.
Performance issues are mostly caused by JavaScript code and not by CSS. Although some of the units that are used in CSS can have some impact. This impact is small so always use the unit that you can use to achieve something. If you want a full page div for example, you always have to use vh for the height, but you can use % for the width. Use what you need depending on what you want to achieve.
Other example, maybe you want a padding to be larger or smaller depending on the size of the text, you can not achieve this with px, so you have to use em or rem.
px is the best performance since it doesn't need any calculations, although, sometimes it is hard to achieve something with only using px.
I found a solution to scaling my web page down here. However, I noticed that this solution messes with jqplot's highlighter and zoom functions. Is there a solution that doesn't interfere with these functions?
The only way I can think of with out seeing your code, and without using the solutions provided by the other question, is to add separate size percentages to each element on the page. For example, adding font-size: 30%; will decrease the font size of all text in the element, so you could put this into the body styling’s. I don’t think there is a way to change all div's by a persent of their current size, without using zoom functions in css (I presume you have considered these as they are in the answer for the question you linked) but there is probably a way to do this in JS, by collecting the dimensions and timesing by an amount. You can just change individual sizes for each div though.
Hope this helps :)
Unfortunately, scaling and zooming is part of the function of the browser. This is necessary for screen readers and people with eyesight issues to zoom in.
When you try to take control with zoom, you will always be playing with compatibility and browser issues.
A suggestion? It sounds like your requirements are bogus in light of current internet-enabled mobile devices. A liquid layout is the current best practices for a reason.
EDIT: Have a look at http://alistapart.com/article/responsive-web-design
My website, for the most part, uses relative fonts and fluid layout techniques, so our site layout will scale based on what the browser's default font size is set to. But there are certain elements that have fixed widths, and our layout past a certain font size just doesn't work well or look good. It's not feasible at this point to go back and change all of those elements.
So, I want to allow the site to adjust based on the user's chosen default font size in the browser--within certain limits. For example, things start to look a bit wonky at a browser fontsize of 22px; I'd love to have the site be relative, up until it hits a maximum base size of 22px.
From what I can gather, there doesn't seem to be any easy way to specify this purely in CSS. I was thinking the best approach is to use Javascript to detect the base fontsize on page load, and if it's >22px then I'll set a style on my body tag to fix font-size to 22px. If it's less than 22px, I won't do anything (and leave our default relative style in place). I don't care as much about handling font size changes while the page is loaded, as that seems like an edge case (that would get corrected on next page load).
Is this the best approach, or are there better ways?
You cannot prevent users from increasing font size (even if you set the size in pixels, users can just Ctrl +), and many people think this is good – people may need larger font size than you expect, and breaking layout somewhat may be better than not being able to read at all. So what you can do is to make any reasonable effort to ensure that the page works reasonably for a wide range of font sizes.
I am working on a personal website with more of an intention to practice good web development skills than anything. I am trying to build a cross browser( most of the modern browsers also IE6 ) and also hopefully a cross device ( trying to keep it the same in mobile devices ) web page. What i want to build is a 3 column floating layout design with header and footer.
Until now i have figured out a few good practices.. please correct me if you feel otherwise..
First and foremost is to keep the structure(HTML), presentation(CSS) and behaviour(JS) mutually exclusive.
For scalability the best option seems to be %units over em units
Avoid using div's unnecessarily, to start a new line better use tags
Best not to use margin for styling, when needed use padding
Now my issue is i have an image in my webpage. I have used only %units till now But if i use the %unit for the width of the image it wont be scalable. I can use em units for all of my web page and leave the image also scalable by setting its width in em units in my css.
But before i do that i wanted to know if its a good practice to let images scale, and also what will be the issues we face with such a design.
Thank you
Any suggestion or information on this idea is greatly appreciated.
Users can employ their browser's Zoom function to scale the site as a whole (including images). The text scaling function is meant only for scaling text - I'd advise against modifying the expected behavior.
CSS is not my forte so this might be something simple. I have set my footer font size in a stylesheet using 0.8em but on different pages it is a different size. I'm only editing someone elses work and he did a poor job at not closing tags so its a bit painful.
Is there a way to clear all font settings so that the footer is the same across all pages? Or is this a problem that can be solved some other way?
Cheers for any help.
I notice no one has touched on how em works as a font size unit, so I'll try to clear that up for you.
There are two ways to tell the browser how large your fonts should be rendered.
setting an absolute size
For absolute sizes, like px or pt, you're telling the browser exactly what size you want the text to be. If you write 12px, it's going to come out as exactly 12 pixels tall.
setting a relative size — em is a relative size.
For relative sizes, like em, you're telling the browser how big to make the text with respect to other text on the page. This works sort of like a percentage, so if your footer text is sized at 0.8em, it will be rendered 80% as tall as the main text on the page.
This explains why you're getting different sizes on different pages. If the font size of the body is set explicitly on one page, but not set at all on another (or set explicitly to a different size) that will make your em-sized fonts render at different sizes.
This is also why it's really bad to use <font> tags. It's going to be a serious pain to dig around those tags and figure out what explicit sizes are being set that might be throwing off your ems.
When you set your font sizes using CSS, this is not only an information which is easy to find, but also a property which is easy to modify.
As David Thomas says, the use of <font> is deprecated. If you have a software tool to do global edits, you might try deleting all the <font> tags and then add classes back to the HTML that actually needs to be different fonts and add the font info to the CSS.
The other option is to get through one at a time, which I imagine to be time consuming. At least you would have cleaner HTML when you were done.
In a weak defense, the previous designer may have used a WYSIWYG web design tool that created the HTML for him/her and didn't see the resulting code.
Try using an exact size with px or pt units rather than em.
Sizes in percent and em can get screwed up by unintended levels of inheritance but not px or pt.
My solution was basically to do inline styles to correct any problems. Using px rather than em was an option but we preferred to keep accessibility rather than best practice against using inline styles (any best practice was out the window anyway).