A note for myself after spending some time working out how to make a top menu bar on a website resize both the menu items (<ul><li> elements) and the font within the menu item as the screen width scaled.

The first bit was easy, istead of using a fixed size (120px) for the width of the <li> elements make the container element a percentage width of its parent - say 95% - and then if there are five menu items at the top (horizontal) level make the <li> width 20% (or whatever is appropriate for the number of entries in the top menu bar).

That's all well and good but the font-size doesn't scale.

Ok so use vw units instead of px or pt or em for the font. 

That works but fairly quickly the font becomes to small as the width decreases or too large as it widens.

Next fix to set a minimum is to use calc() for the font-size

eg {font-size: calc(8px + 0.5vw);}

This also works with em so if the default body font is 16px (it usually is, unless explicitly changed in CSS) then

{font-size: calc(0.5em + 0.5vw);} will be the same as above. But you need to know what the current font size is if it has been set higher up in CSS

This now works with user defined scaling (cmd +/- ) for accssibility

That works for the minimum but you have to tinker a bit to get the right combination of fixed value and proportion of view width.  

There is a solution here using SASS/SCSS, but that requires you to be compiling your scss into proper css which seems like a lot of faff for a simple bit of maths. So I reversed the mixin and came up with this in simple css

/******* if using Rvw for responsive size and Npx for min Xpx for max then

.classname {
    font-size: Rvw;
@media (max-width: (N*100)/R ) {
    .classname {font-size: Npx;}
@media (min-width: (X*100)/R ) {
    .classname {font-size: Xpx;}


Assuming Dpx default font size for em and specifying an min and max in em then: 

.classname {
    font-size: Rvw;
@media (max-width: (D*N*100)/R ) {
    .classname {font-size: Nem;}
@media (min-width: (D*X*100)/R ) {
    .classname {font-size: Xem;}

Now I have a template for a css class that will scale font size within limits set in em so obeying accessibility requirements. Whooeee :-)

Question remains - it is possible within the css to get the value for D, the default font size for 1em in pixels?

Frank wasn't referring to digital cameras because they didn't exist then, but the current tendency of camera marketeers to try and outgun each over on number of megapixels brought it back to mind.

Time was before the days of "smart" phones when it was standard to be able to sync your contacts between your computer and your phone, and possibly even your SMS messages and calendar. Been doing this since my first digital Nokia in 1994.

It was always a bit flakey and dependent on having the right cable and on the phone manufacturer (usually) providing software to run on the computer (PC or Mac). There were some third party utilities that worked as well and were generally better than the phone makers' offerings which tended to be clunky at best.

Much time spent today grappling with the problem of applying a style to a file upload control on a website. The site application is ASPX pages with code behind in VB. The button controls on the rest of the site (whether asp controls or straight html) are styled with CSS. The new page I was adding as well as various other controls also needed to have the ability for the user client to upload a local file to the server, and then there would be some backend processing happening server-side.

It turns out that there is no simple way to apply a style to the button on an HTML Input type File tag - not surprising since the selection box and button are created client-side by the browser, and in fact different browsers implement it differently. The asp File Upload control is rendered on the client as a standard HTML Input tag with type=file, so even setting the CSSclass attribute doesn't really give you any flexibility. I wanted to be able to independently colour and position both the text box and the button.