Twenty Twelve: verify IE7, IE8, and IE9 support

[obenland]

As the title suggests.

Probably just a few layout tweaks needed.

[SergeyBiryukov]

Related: #20198, #20190

[SergeyBiryukov]

21440.matchMedia.patch​ is an attempt to fix the JS error due to a missing window.matchMedia() method. An alternative would be to add something like ​matchMedia.js.

[SergeyBiryukov]

The layout in IE 7 and IE 8 is almost the same (width is shifted to 100% as described in #20198), the only difference is that main menu is broken in IE 7 (21440.ie7.png​).

[obenland]

It's probably the media queries that are causing this.

An easy way out could be adding another script to the <!--[if lt IE 9]> conditional, like ​respond.js.

[obenland]

21440.image-unit-test.diff​ doesn't help with IE8 styling, but makes the IE8 hack address IE8 only. Fixes the 3rd Image Test in Theme Unit Test for all browsers.
Needs testing in IE8!

[SergeyBiryukov]

Replying to obenland:

but makes the IE8 hack address IE8 only.

Per @iandstewart, avoiding targeting just IE8 was intentional for Twenty Eleven (ticket:18775:11).

[lancewillett]

Talking it over with drewstrojny: For IE7 we could just show mobile view, it doesn't need to have media query support.

[philiparthurmoore]

Input/Submit buttons on search widget and password protected fields need margin/height work in IE9 and down.

[sennza]

As the widths and floats are declared in a media query IE7 and IE8 didn't haven't the correct layouts. Normally on clients sites I would address this with a JavaScript polyfill however I figured it would be better to address this with classes for Internet Explorer similar to how Twenty Eleven does and I added some IE7 and IE8 CSS conditionals to fix the layout.

I'm open to any suggestions of a better way to do this though :)

[philiparthurmoore]

Replying to sennza:

As the widths and floats are declared in a media query IE7 and IE8 didn't haven't the correct layouts. Normally on clients sites I would address this with a JavaScript polyfill however I figured it would be better to address this with classes for Internet Explorer similar to how Twenty Eleven does and I added some IE7 and IE8 CSS conditionals to fix the layout.

I'm open to any suggestions of a better way to do this though :)

Argh. I didn't realize you uploaded a patch for this before submitting #21489. Very sorry about that.

[philiparthurmoore]

Two solutions seemed to be proposed here: 1) CSS-based adjustments (see @sennza's patch) and 2) media queries for IE7/IE8 (see latest two patches). My preference is for media queries here but would love to hear other thoughts on this.

[SergeyBiryukov]

With 21440.patch​, the layout looks proper in both IE 7 and IE 8 (the menu is still broken in IE 7 though, see 21440.ie7.png​).

21440.2.patch​ adds body background color as well (and fixes tabs vs. spaces).

[lancewillett]

From chellycat in #21486

Removing width: auto from images, which was causing images resized in the editor to appear full width. The "width: auto" is an IE8 specific fix and should be moved to IE8-specific styles.

See patch on that ticket, would require adding the html element class switch to add .ie8 hooks.

[obenland]

Replying to lancewillett:

From chellycat in #21486

Removing width: auto from images, which was causing images resized in the editor to appear full width. The "width: auto" is an IE8 specific fix and should be moved to IE8-specific styles.

See patch on that ticket, would require adding the html element class switch to add .ie8 hooks.

21440.image-unit-test.diff​ doesn't. Would be more of a hack though.

[lancewillett]

In [21475]:

Twenty Twelve: add polyfill JS for matchMedia rules, avoids JS error in older IE versions. See #21440.

[lancewillett]

In [21482]:

Twenty Twelve: add basic styles for IE7 and IE8, supports basic layout now with the small-nav styles. Props obenland, closes #21440.

[obenland]

Replying to lancewillett:

From chellycat in #21486

Removing width: auto from images, which was causing images resized in the editor to appear full width. The "width: auto" is an IE8 specific fix and should be moved to IE8-specific styles.

Not addressed yet. With the conditional .ie class in place it's a piece of cake.

[obenland]

Makes Image Test, page 3, in Theme Unit Test valid

[obenland]

21440.image-width.diff​ Also makes Image Test, page 3, in Theme Unit Test valid

[lancewillett]

In [21516]:

Twenty Twelve: move IE8 styles to specific IE selector, props obenland. Closes #21440.

[Japh]

@lancewillett, shouldn't there be some props for @sennza there too? I see his patch there and remember discussion about it at the Dev Hack Day after WCSF.