Topic Closed
jogai
264 Posts

CSS is loaded with the combine.php. Why isn’t the css link in the head just linking to the latest minified & g zipped version of the css? (eg: data/_cache/hash.css)

I was wondering about it when thinking of the following.

Generally I like to add some extra css for older IE browsers, currently I've implemented this in my template after the GetHead function like this:

	<!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="themes/Theme/Variant/oldIE.css"/>
        <![endif]-->

This way oldIE's get some css to fix a few ie quirks. This works good enough, but I have to do the minifying myself and there is always an extra request to the web server. What I'd like to see gpEasy do for me is output something like:

<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="data/_cache/eTag-name.css"/>
<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="data/_cache/oldIE-eTag-name.css"/>
<![endif]-->

Where the first css is the standards compliant version (just like the one that's now generated by combine.php) which is served to every browser except oldIE, and the second is the same combined with an oldIE only. That way its still one request for all browsers. If there is only one option this whole conditional mess could be skipped and just serve the default one.

The configuration for the second conditional comment could be added to the theme details as option:

"Load IE style sheets for browsers older than:(selectbox)IE 9/IE 8/IE 7/IE 6"

Edited: 8 years ago#4385

Eric
193 Posts
1.5K Downloads
1 Themes

I use the if statements to add a class to the <html> tag, Then I can use that class to define the browser-specific style. This allows you to keep all your styles in one file. 

It's all explained in html5 Boilerplate.

8 years ago#4387

jogai
264 Posts

I'm familiar with the boilerplate, but I prefer to do some things different. I don't want to load IE stuff, a standards compliant browser doesn't need anyway, in the common style sheet.

I propose this because it enables template builders to keep the template clean and still have the advantage of feeding the trolls oldIE's some specific stuff. If someone can explain my first question I can submit a request in the feedback section.

8 years ago#4388

Josh S.
2K Posts
280K Downloads
16 Themes
18 Plugins

Why isn’t the css link in the head just linking to the latest minified & g zipped version of the css? (eg: data/_cache/hash.css)

Hmm, good point. I can't think of any reason not to do that.

I propose this because it enables template builders to keep the template clean

Always a good thing, especially as IE use drops. Not sure how quickly I would be able to get to this though, it might help to add the idea to the Feedback area (which I personally use as a to-do list).

8 years ago#4390

jogai
264 Posts

it might help to add the idea to the Feedback area

I know, so here it is: CSS Conditional (and improved) loading. I was just making sure this doesn't go against some best practices/gpEasy visions. 

a good thing, especially as IE use drops

Indeed, and when webmasters see no IE on their sites anymore, with this solution they can just drop the oldIE.css.

Everyone please vote: CSS Conditional (and improved) loading :-)

8 years ago#4391

Eric
193 Posts
1.5K Downloads
1 Themes

I'm familiar with the boilerplate, but I prefer to do some things different. I don't want to load IE stuff, a standards compliant browser doesn't need anyway, in the common style sheet.

Even without using the other boilerplate stuff, I use the if statements to add a class to the <html> tag. And I find that I rarely have to write more that one or two lines of browser-specific style for a website (usually IE7). so it's hardly bloated. But that's a personal preference.

As I understand, you want gpEasy to take into account the if statements and just minify and gzip the individual style sheets without combining them. I'm not sure how combine.php handles things now.

Indeed, and when webmasters see no IE on their sites anymore

Don't hold your breath ;-) I'm just waiting for IE7 use to drop. I stopped caring about IE6 support and I can live with 8 and 9.

8 years ago#4396

jogai
264 Posts

so it's hardly bloated. But that's a personal preference.

I know, but I'm against loading unused css, especially if its only meant for broken browsers, and thats personal too ;-)

As I understand, you want gpEasy to take into account the if statements and just minify and gzip the individual style sheets without combining them.

Sort of, but with combining; The oldIE version is the standard css with the additional IE specific stuff combined. With the example above every browser loads only one stylesheet.

8 years ago#4412

Eric
193 Posts
1.5K Downloads
1 Themes

The if statements are client-side and the combine.php is server-side. I'm not sure how gpEasy will know which files to combine and which ones to drop.

What if you need to target a specific version?

8 years ago#4425

jogai
264 Posts

gpEasy doesn't have to know. Both are generated but the browser will only reads one.

This system is very simple and doesn't take each version into account. You can eventually combine this with the method from the standard h5bp. In that case all IE's load the second css and in there are the specifics. Feel free to expand the CSS Conditional (and improved) loading feedback issue. I don't know whats easy to implement and what is most wanted.

8 years ago#4427

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register