[2.0] IE8 support vs generated CSS

Discussion corner for Developers of Serendipity.
Post Reply
User avatar
yellowled
Regular
Posts: 7083
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

[2.0] IE8 support vs generated CSS

Post by yellowled » Sat Mar 08, 2014 1:50 pm

I just now realized we might have a teeny tiny issue with IE8 support in the new backend. :oops:

The backend's CSS was written “mobile first”, which means it starts with basic general styles and assigns all styles needed for bigger screen resolutions though media queries. I.e. the styles for smartphones in portrait orientation are inside

Code: Select all

@media only screen and (min-width: 480px) {}
etc. for larger resolutions. Since IE8 does not support @media, we would need to include an extra stylesheet for it which removes these so that IE8 gets the “desktop” layout of the backend. Usually, this is not a big issue since we can use conditional comments to include the oldIE stylesheet for IE8 only. (It's a bit of a hassle to actually generate said oldIE stylesheet, but nevermind.)

However, in s9y's case, the style.css is not referenced “directly” in the <head> but through {$head_link_stylesheet}, which as far as I understand it means, it's piped through serendipity.css.php to include styles inserted via the css_backend hook.

Now, we could just reference a static IE8 stylesheet in a conditional comment, but that wouldn't include those styles inserted via serendipity.css.php, right? I'm not sure if that's even used in the current backend for backend styles. Doesn't look like it. But it might become an issue …

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: [2.0] IE8 support vs generated CSS

Post by Timbalu » Sun Mar 09, 2014 10:21 am

Eject, IE8!
We don't need to support cash terminals!
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

User avatar
yellowled
Regular
Posts: 7083
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0] IE8 support vs generated CSS

Post by yellowled » Sun Mar 09, 2014 11:43 am

Timbalu wrote:Eject, IE8! We don't need to support cash terminals!
As much as I would love to do that, that would have to be a unanimous decision by the whole development team.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: [2.0] IE8 support vs generated CSS

Post by Timbalu » Sun Mar 09, 2014 12:09 pm

Please take my post as a serious vote! :)
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

User avatar
onli
Regular
Posts: 2264
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: [2.0] IE8 support vs generated CSS

Post by onli » Sun Mar 09, 2014 2:56 pm

Ok, I had a look at it.
yellowled wrote:Now, we could just reference a static IE8 stylesheet in a conditional comment, ...
That seems to me the way to go.
yellowled wrote:...but that wouldn't include those styles inserted via serendipity.css.php, right?
If you only add the IE8-stylesheet by using a conditional comment, the other css woudl be there as well, no?

User avatar
yellowled
Regular
Posts: 7083
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0] IE8 support vs generated CSS

Post by yellowled » Sun Mar 09, 2014 3:34 pm

onli wrote:If you only add the IE8-stylesheet by using a conditional comment, the other css woudl be there as well, no?
Usually not. Usually, I do it this way

Code: Select all

<!--[if lte IE 8]>
    <link rel="stylesheet" href="oldie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="style.css">
<!--<![endif]-->
with oldie.css basically being a copy of style.css without the media queries. (I also usually generate this automagically using Sass, but that didn't seem a good option here with others possibly contributing to the stylesheet.)

An option would indeed be

Code: Select all

<link rel="stylesheet" href="style.css">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="oldie.css">
<![endif]-->
Hm. I'm not sure if that would actually be better in terms of performance (in IE8), page rendering (FOUC?) and maintainability, but I guess I'll just have to try that …

(… unless we can agree to not support IE8 at all, but I don't see that.)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: [2.0] IE8 support vs generated CSS

Post by Timbalu » Sun Mar 09, 2014 3:38 pm

yellowled wrote:(… unless we can agree to not support IE8 at all, but I don't see that.)
Who is the one that wants to support this? AND WHY?
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

User avatar
yellowled
Regular
Posts: 7083
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0] IE8 support vs generated CSS

Post by yellowled » Sun Mar 09, 2014 3:59 pm

Timbalu wrote:AND WHY?
Having clients who have to still use IE8 due to having intranet applications which only work in that version might be a good reason.

I know someone who basically screwed up access to his company's time logging application by accidentally updating to IE11 on his work laptop the other day. (No, it wasn't me.)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
onli
Regular
Posts: 2264
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: [2.0] IE8 support vs generated CSS

Post by onli » Sun Mar 09, 2014 4:08 pm

I want that. We can't add bc at every corner and then not support a browser (which is still widely used, no?) when it would be probably quite easy to at least provide basic support. I redact that statement if it is a lot of work, YL can judge that better. I hope it is basically copying the stuff of the media-queries for bigger screens and adding a few workarounds if the layout is seriously broken.
yellowled wrote:but I guess I'll just have to try that …
Please do :-) If it doesn't work, we can think about extending the css.php-mechanism and providing and filling an alternate variable.
But there should be no FOUC, as CSS is applied all at once afaik, and the smartphone-base should be a good start, I think.

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: [2.0] IE8 support vs generated CSS

Post by Timbalu » Sun Mar 09, 2014 4:10 pm

Having clients who have to still use IE8 due to having intranet applications which only work in that version might be a good reason.
Pfff - I think this is theoretical, not practical! And things never change if this gets supported ever.
Who has to use IE8 because of office intranets, is not allowed to surf blogs either...
Installing additional Chrome or Mozilla browser wouldn't do any harm, AFAIK. That is why I prefer to be strict here.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

User avatar
yellowled
Regular
Posts: 7083
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0] IE8 support vs generated CSS

Post by yellowled » Sun Mar 09, 2014 4:40 pm

onli wrote:We can't add bc at every corner and then not support a browser (which is still widely used, no?)
Well … statistics … you know. :wink:

Global market share of IE8 according to http://gs.statcounter.com (which is probably the most reliable source for global data on that) is currently at 9.8% of all desktop browsers.
onli wrote:I hope it is basically copying the stuff of the media-queries for bigger screens and adding a few workarounds if the layout is seriously broken.
It's basically that, yes. It might result in some sort of FOUC in IE8 because it first parses the full stylesheet and then some of those styles again (in a seperate request), so performance/page rendering could be an issue. I really can't state how much that will affect page rendering without testing it. It will not be an issue in all other browsers but IE8.

We also lose all the perks of a stylesheet parsed by serendipity.css.php like {TEMPLATE_PATH} etc., but that should not be too much of an issue due to the fact that it is mobile first. All those things should be outside of media queries, especially since we don't use any background images.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
yellowled
Regular
Posts: 7083
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0] IE8 support vs generated CSS

Post by yellowled » Sun Mar 09, 2014 4:59 pm

Timbalu wrote:Installing additional Chrome or Mozilla browser wouldn't do any harm, AFAIK.
There are companies as well as public organizations (i.e. schools) which actually restrict users technically from installing any software, but do not limit internet access in general.

While I applaud the notion to just no longer support IE8 at all, I also know that can be harder to do if you have to think about more than hobby bloggers as your target audience.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
yellowled
Regular
Posts: 7083
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: [2.0] IE8 support vs generated CSS

Post by yellowled » Sun Mar 09, 2014 9:30 pm

I just now tested the backend in IE8 with a “static” oldie.css – it's really not that bad. Of course, it doesn't look as good as in a modern browser because the old fella doesn't support all that fancy CSS3 stuff, but it's usable (if you have to, I guess). Few minor quirks which I think we can iron out, but no visible FOUC due to the extra stylesheet.

Not as bad as I expected, actually.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Post Reply