Progressive enhancement -- design from the inside out.

SVG works in some situations, the most common method x2 image sizes and letting the browser scale it down. It's not a big deal right now, but I guarantee in a few years "retina" screens will be available everywhere and a lot more people will have them. It really adds a whole new level of challenges to building a website.

 

Which just makes it look like **** on normal displays given what a disaster browser scaling of images (particularly line-art) is... also not entirely compatible with CSS background-image in legacy browsers... though one COULD stuff it in a media query so that the normal size one is only used in legacy browsers, the double-sized being scaled with CSS3's "background-size" as the alternative.

I think they need to add media queries to detect just how badly the browser is LYING about the resolution when it comes to "pixels"; I've not seen one that does that yet and it would be really handy for dealing with situations like that where retina displays are ignoring the viewport meta, ignoring text-size and STILL just flat out resizing things and lying to our faces about it.

They CLAIM you can use -webkit-min-device-pixel-ratio and/or min-resolution, but I've never been able to get either of those to actually work.

 

Hello again,

This flex trick isn't working on Safari:

-webkit-flex:1 0 auto;
-ms-flex:1 0 auto;
flex:1 0 auto;

Code (markup):

How to solve it?

Thanks,

 

Actual safari on an actual mac? Should be working... not that I have access to one of those rinky toy "fisher price my first computers" to test on at the moment and I'm away from the workstation with the VM.

I'll check when I get back, but what version of Safari, on what OS, and on what platform. YES, it matters since Safari has been becoming the new Internet Explorer ever since Google absconded with all the actual talent when they forked off Blink from Webkit.

There are some versions it just will not work on -- typically Safari prior to Lion since they're no longer updating if you don't update the OS -- and at this point I'm treating those users the same way I treat IE8 users. The page will work, but don't expect it to be identical to REAL modern browsers.

Sad when IE11 is less of a headache to support than Safari at this point! It's aging like milk!!!

 

It''s Safari 5.1.7 on Windows 8.1.

I didn't update anything to the latest versions.

The example: http://www.cutcodedown.com/progressive/stage4_style/template.html is working because the column height is greater than screen height.

I don't have Macbook and iPhone to test it. Will this affects on all versions of Safari on any OS. I can't test it online since my project is in development. Seriously, I give priority to mobile.

Thanks,

 

Nope. Don't rely on anything tested on Safari for Windows, it's outdated (by years) and isn't being developed anymore. Disregard any errors you encounter there, the only way to know is to test it on an actual Mac (and as @deathshadow said, preferably a relatively updated one). Safari for Windows is a joke, and while I used to have it on there to test, I don't anymore, because it's so outdated. Any Windows-user who uses Safari deserves all the pain and non-working visuals s/he can get. Seriously - go for Chrome, they both use the same rendering engine (or, well, they used to, back then).

 

yeah, "well there's your problem" -- two thirds of CSS3 wasn't even being implemented the last time Safari for Windows saw a version update. @PoPSiCLe hit it on the head about it being outdated. They ANNOUNCED ending support for it five years ago, and it hasn't seen an update in three years. Even the last version lagged about two years behind the mac version if compared feature to feature, which is a hefty chunk of why it's been "dead" it's entire existence.

You cannot trust it to represent Safari on the Mac, you are more likely to have visitors from IE 5.x than you are the windows version of Safari, and it's so backwards in terms of what it does that it might as well be IE 5.2 Mac.

Though the Mac version from back then doesn't support flex-box either. Flex box is REALLY new, which is why I design with the graceful degradation plan of it NOT pushing the footer to the bottom, "OH WELL". It can still be something of a struggle to get working given the different browser implementations -- some things in CSS3 -- like Flex -- are still in the "wild west" stages of implementation much akin to when CSS was first introduced during the Microshaft vs. Nutscrape wars decades past.

Again though, graceful degradation -- you plan on it NOT working, if it's available for people living in THIS century, fine. Fancy crap like the footer being stuck to the bottom or rounded corners don't show up for people using outdated crap? So long as the page is still USABLE by the visitor, who gives a flying purple fish?

Sometimes developers, or worse the halfwits who know jack **** that call themselves "designers" get too hung up on making every browser behave identical -- if they all behaved identical why would we have multiple different browsers?

 

I'm almost done with a new site building based on this tutorial.
However, the h1 and footer aren't scaling from @media (max-width:34em) { } downwards.
They aren't moving and sit still on their perch since @media (max-width:40em) { } upwards.
Any suggestion?

 

Don't need more help. I can solve this. It's min-width:48em;

 

Confusing min and max-width on media queries and figuring out which ones are triggering and overlapping can be a bit confusing at first -- Something I suggested back a decade ago was that they NOT use the existing properties as the trigger and use more natural language like say "width-larger-than" and "width-smaller-than" or even have actual expressions like (width <= 80em).

Naturally the idea was shot down as "more confusing" -- then people wonder why I think the W3C and WhatWG are filled with ignorant delusional twits. I'm saying twits, I mean a similar word with a different vowel. All you have to do is look at the ivy-league mentality mated to legalese only a gaggle of lawyers could decipher that they call "specifications". It's almost like white-collar criminals are running things and trying to make the specifications about as effective as UN sanctions.

That or again, I'm just too blue collar for this ****

 

Good read. Lots of good info.

I have repeatedly over they years been hammering CONTENT, CONTENT, CONTENT. Without usable content NOTHING ELSE MATTERS.