Skip to content

Latest commit

 

History

History
109 lines (65 loc) · 10.2 KB

index.md

File metadata and controls

109 lines (65 loc) · 10.2 KB
Raw
title description author date lastmod discussionId
Old dog learns old trick
A major “Do’h” moment in the never-ending battle against Internet Explorer.
Bryce Wray
2019-02-16 10:50:00 -0600
2022-02-12 12:27:00 -0600
2019-02-old-dog-old-trick

"What? You must be joking! Darth Vader was Luke's father?"

A few days ago, I felt like that guy: enlightened and glad for it, but chastened for my failure to "try to keep up," as the impatient are wont to say. Yes, it's okay for an old dog to learn a new trick, but when an old dog missed the trick a long time ago --- and he was getting paid dog biscuits to know that trick --- hoo, boy.

Fooling the king of web futz

If there's anything an old web guy likes, it's another way to schnooker Internet Explorer.

Oh, pardon the technospeak; let's say, "to fool" Internet Explorer (which is akin to fooling an addled fly). Said schnookery is to avoid having to kowtow to IE's ancient, hoary behavior in ways that cause problems for more standards-compliant browsers. As a matter of fact, I learned of one this week --- and it works like a charm.

Only thing is, it's nothing new. Holy cow, it's been out there for years. Yet I missed it. Hey, I didn't simply miss it. I didn't have even a clue about it.

So, I'm both relieved to know it and embarrassed that I didn't. Let me tell you what happened.

Wresting victory from the jaws . . .

Remember that wretched excuse for a WordPress page builder against which I inveighed? Well, I have managed to convince the appropriate folks that we should yank it from my employer's growing number of websites as the opportunities present themselves. Yay. Of course, that'll be a while, because we're talking about production sites that serve many thousands of people a day, and one mustn't throw the proverbial monkey wrench into that functionality. But the path has been laid out. We will get there. Again, yay.

Part of the way I managed to get this decision, for which I am more grateful than words will express, was to take one of our existing test sites, rebuild it (and, I believe, improve it) in the page builder I prefer when I have to prefer one, and let the appropriate folks check out the results for themselves.

Only thing is, my day job is in one of those enterprise shops where Windows 7 and, yes, Internet Explorer 11 remain alive and well --- although the vast majority of its denizens use Chrome, the only other browser open to us within the infrastructure --- so it behooved me to make sure IE 11 wasn't ruffled by what I had done. After all, I've heard stories that some of our top folks still prefer the browser that our shop sets for auto-launch on each log-in to Windows, and that is none other than IE; so nothing would scotch my hard-won happy path faster than Somebody seeing unexpected things when viewing that newly rebuilt site once it goes to production.

Metaphor: IE as a nasal zit

Everything had gone fine in that respect except for one thing that bedeviled me throughout last weekend, when I completed the vast majority of the transition to the test site that, as it turned out, would earn my path to freedom from what I've dubbed "GUPB," for godforsaken unidentified page builder.

However, like the pimple on one's nose on the night of a big date, this particular "one thing" was a big, honking problem on the home page. On the first slide of a slider, carousel, whatchamacallit, at the top of the home page.1 Arrgh!

To be specific, the text that overlay that first slide was shifted ’way too far to the right. It looked fine in the desktop versions of Chrome, Firefox, and even Edge. And it looked fine on iOS and Android. Only the damnable IE resisted.

I put the annoyance aside for that weekend, what with all the other pages I had to rebuild; but, on Monday morning as I flipped through the various pages once more in an effort to find stuff I'd missed in the transition, I remembered there was that IE annoyance to fix.

Everything I did in CSS that made it look mildly acceptable on IE made it go bonkers on the real browsers (<burn>shots fired</burn>). After spending ’way too much time trying to dope it out, and with my regular tasks waiting impatiently for my attention, I decided to do that hated thing known as browser-specific CSS.2 So I proceeded to create a little "ie.css" stylesheet and prepared to use IE conditional comments. Yep, those ugly things in the <head> section that only Internet Explorer sees, like:

<!--[if IE]>
	<link rel="stylesheet" href="/css/ie.css">
<![endif]-->

Except I didn't learn until that very morning --- and this is where I really feel foolish --- that Internet Explorer had stopped supporting those in IE 10. Ten! Hey, sports fans, that was released in 2012.

How did I miss that??

I am still embarrassed. In the words of Donald Sutherland in Animal House: "Listen, I'm not joking. This is my job!"

Share the shame, but share the help, too

So why am I sharing my shame? Because I saw posts from other people still asking about IE conditionals for IE 10 and 11 even in recent months, so there are others to inform. Here is the correct way to schnooker IE 10 and 11 into seeing an instruction that you want the real browsers to ignore (hat tip to Philip Newcomer and numerous folks on Stack Overflow):

. . . create a media query using -ms-high-contrast, in which you place your IE 10- and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and . . . available [only] in IE 10+), it will . . . be parsed in [only] Internet Explorer 10 and greater.3

So I was saved the trouble of an "ie.css" sheet; and my resulting addition to the end of the "style.css" sheet I was already using turned out to be something along these lines:

/* ==== for IE 10 and 11 **ONLY** ==== */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.slider-text {
		hey, IE, don't screw up that text or it's coitains, see? Coitains.
	}
}
/* ==== end, IE 10 and 11 **ONLY** ==== */

. . . or code to that effect. And it worked like a charm.

Lessons from my late learning experience

So, children, what did we learn today?

First, don't be ashamed to admit you don't know something. Maybe you should be ashamed that you didn't know enough even to have curiosity about the item of which you were ignorant, but "water under the bridge" and all that rot.

Second, when you belatedly discover the thing you surprisingly had missed, let others know it, too. Life happens and people miss things. They'll appreciate knowing --- finally knowing.

At least, that's my sheepish story and I'm sticking to it. But now you know.

So do I. Finally.

Woof.

Oh, Lord, Helen, he's STILL talking about . . .

Two things about my last post, an abbreviated revisiting of iA Writer after I'd previously dissed it:

  • While I wrote much of that post within iA Writer and then transferred it to Ulysses, I did this one entirely from within iA Writer. (Whether it, too, will end up within the Ulysses Library is TBD.) While, without question, iA Writer is one opinionated son of a gun --- and I have to say that it's weird to read one article after another referring to a software app as "opinionated" --- it doth have charms to sooth the savage static site generator.
  • But the shocker is that I've actually spent some time over the last few days writing the WIP in iA Writer, too. Right now, it's an experiment and no more. Then again, about nine months ago, I said that about a Memorial Day weekend tryout of Ulysses, and suddenly I was using it instead of Scrivener, and committing my beloved WIP to it a few months after that. I still have some serious reservations about iA Writer as a repository of anything longer than fluff like what you're reading now --- for example, it seems a trifle unstable at times, and I have lost a little writing when it crashed while I've never lost any when Ulysses hit the dirt --- but that's what experimentation is for, right?

In short, stay tuned.

And, oh, yes: my continued thanks to Chris Rosser for tweeting (below) about my last post. As he might say: "Thanks, mate!”

{{< stweet user="RosserWrites" id="1095457720709263360" >}}

Footnotes

  1. I'm no fan of image sliders for a variety of reasons, chiefly that I think they distract from your messaging more than they help it. But t'ain't my call, McGee. When I was a webmaster working in Marketing, I could influence such decisions; those days are behind me. ↩

  2. And, no, I don't know whether HTML5 Shiv would've fixed it; I didn't try it. ↩

  3. "How to Target Internet Explorer 10 and 11 in CSS," Philip Newcomer: The Backwoods Coder. ↩