Internet Explorer (all versions) won't support the
calc() function. For the longest time I noticed IE11 wouldn't perform @media queries and thought it was IE11's fault for being unable to, but then last week I noticed some versions of Opera (there are soooo many versions of Opera, ya'll) would not perform the queries, either. Suspecting
calc() was the issue, I rewrote my
calc() functions in longhand and sure enough the @media queries began to work in all supporting browsers, and as a nice bonus, they began working in IE11, too (they've always worked in Edge and - for some reason - IE Win8 Mobile).
I prefer using
calc() over setting min, max, and normal widths on page elements and margins because a) it uses easy equations and b) is less code and less calculating because the whole point of it (I think; don't quote me) is to act like an
I've always been somewhere between bad and awful at accessibility but I'm working on getting better at it. While I've slowly made a lot of
concessions changes over the years to make things more accessible, I still had (have, if you count all the crap hiding in @media queries) a lot of stuff hidden in
display: none. This is bad. So is
text-indent. So is
height: 0; width: 0. So what's a girl to do, huh?
The best all-in-one-answer seems to be this combination of rules. The link title misleads one into thinking the article covers only the use of
clip: rect() but it actually covers best practices and explains why other practices are not the best. With the obvious caveat that people like Chris Coyier keep saying about the use of
clip: rect(): 'but it's DEPRECATED so don't'. But here's the thing: no one cares if it's deprecated or dead and buried as long as it works. And it does. Browsers still use it while
clip-path: inset() doesn't have full cross-browser support yet (not to mention
clip-path: inset() has zero backward compatibility;
clip: rect() works without the comma delimiters in use today in IE6-8).
I have a total love-hate relationship with background images being used in design. If anyone thinks the design I'm currently using is image-heavy (I wouldn't blame you, but) visit style_test, which shows a legacy copy of this design in its original, untouched form. You won't see a single image on it because I never uploaded them to Dreamwidth (I think I still have them on an external hard drive, somewhere) but if you read the CSS you'll see it's like wow, have some text with your images. I used it that way for at least four years before finally hoovering some of them out.
I could go on and on about how many of those images I think are extraneous (technically all of them, besides the main background) but I have to concede I thought the layout looked incomplete as-is (yes, with not enough images!) so I added the entry title, comment title, sidebar title and header linkbar images years ago (if I recall right, the sidebar images are from Michael Tyson's design and the entry/comment images are from an early prototype of Elegant Grunge from so long ago it wasn't even called Elegant Grunge yet, which is another reason I love archive.org).
But for the short list of "too many images in the original CSS"? There are two fullscreen headers and footers. Every last link except those in
.entry-content and sidebar
.module-content has images. Yet the entry content is less than 300px wide (because anything bigger would break in IE6, which the design was made to work in) so when put together as intended, all you see is images. It used to make my head swim. But I thought it was "modern design", so for the longest time I stuck with it.
Then Microsoft spearheaded flat design with Win7 Mobile. At the time I thought I should use aspects of "modern design" like drop shadows, text-shadows, rotated images and shiny everything - I mean, images had to literally *shine*. I still have a copy of my layout from back then and sometimes I run it side-by-side with today's and just laugh and laugh and laugh. MS might not be good for much but flat design was the best thing that's happened to
me anybody and they really made the first big push on that. It's less image-load, less server-load, less CSS, and I think it's easier on the eyes.
That aside, I never thought of using even less background images until pulchritude ran into problems a few years back with how things looked without them. She uses a proxy and has to disable images so this was bound to be A Thing. Since then it's hit me that my online acquaintance is not the only person surfing via imageless proxy, so I've been reducing images and trying to get a bit closer to pixel-based design ever since.
CSS as a logical system
In trying to find an answer, I came across Logic In CSS, which suggests CSS is plenty logical as-is. That led me down a rabbit hole where I learned there's a push on for OOCSS (Object Oriented CSS) because CSS can already be abstracted to save time and many lines of code (think LESS and SASS). All
properties|values food for thought.