Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix for styles rendering in IE9 #2817

Merged
merged 10 commits into from
Mar 30, 2017
Merged

Fix for styles rendering in IE9 #2817

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ace60f0
Initial work on fixing IE9 bug
Mar 23, 2017
29beacf
Adding comment
Mar 23, 2017
5940384
Fixing import error due to parsing
Mar 24, 2017
4c1d19c
updating ie9 gulp process
Mar 24, 2017
3607d92
Merge branch 'master' into fix_for_css_size
contolini Mar 27, 2017
ebb90e9
Fix for shrinkwrap
Mar 28, 2017
29dc1aa
Fix for shrinkwrap
Mar 28, 2017
edfed6d
Merge branch 'master' into fix_for_css_size
sebworks Mar 28, 2017
c034c4f
Merge branch 'master' into fix_for_css_size
contolini Mar 28, 2017
2ecf751
Merge branch 'master' into fix_for_css_size
sebworks Mar 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions cfgov/jinja2/v1/_layouts/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,9 @@
-->

{% block css %}
<!--[if lt IE 9]> <link rel="stylesheet" href="{{ static('css/main.ie.css') }}"> <![endif]-->
<!--[if gt IE 8]><!--> <link rel="stylesheet" href="{{ static('css/main.css') }}"> <!--<![endif]-->
<!--[if lt IE 9]><link rel="stylesheet" href="{{ static('css/main.ie8.css') }}"><![endif]-->
<!--[if IE 9]><link rel="stylesheet" href="{{ static('css/main.ie9.css') }}"><![endif]-->
<!--[if gt IE 9]><!--><link rel="stylesheet" href="{{ static('css/main.css') }}"><!--<![endif]-->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think the <!--> hack is necessary anymore. If you want to lose a good part of your day, read through h5bp/html5-boilerplate#1437 (I don't recommend it, though. It's fine to leave the hack.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@contolini, I will revisit this issue when I make an attempt at cleaning up base.html.

{% endblock css %}

<!--
Expand Down
2 changes: 1 addition & 1 deletion gulp/tasks/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ function scriptsPolyfill() {
} ) )
.pipe( gulpUglify( {
compress: {
properties: false
properties: false
}
}) )
.pipe( gulpRename( 'modernizr.min.js' ) )
Expand Down
34 changes: 31 additions & 3 deletions gulp/tasks/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ var gulpRename = require( 'gulp-rename' );
var gulpSourcemaps = require( 'gulp-sourcemaps' );
var handleErrors = require( '../utils/handle-errors' );
var mqr = require( 'gulp-mq-remove' );
var gulpBless = require( 'gulp-bless' );

/**
* Process modern CSS.
Expand All @@ -40,11 +41,36 @@ function stylesModern() {
} ) );
}

/**
* Process legacy CSS for IE9 only.
* @returns {PassThrough} A source stream.
*/
function stylesIE9() {
return gulp.src( configStyles.cwd + configStyles.src )
.pipe( gulpLess( configStyles.settings ) )
.on( 'error', handleErrors )
.pipe( gulpAutoprefixer( {
browsers: [ 'ie 9' ]
} ) )
.pipe( gulpRename( {
suffix: '.ie9',
extname: '.css'
} ) )
.pipe( gulpCleanCss( {
compatibility: 'ie9',
inline: ['none']
} ) )
.pipe( gulp.dest( configStyles.dest ) )
.pipe( browserSync.reload( {
stream: true
} ) );
}

/**
* Process legacy CSS for IE7 and 8 only.
* @returns {PassThrough} A source stream.
*/
function stylesIe() {
function stylesIE8() {
return gulp.src( configStyles.cwd + configStyles.src )
.pipe( gulpLess( configStyles.settings ) )
.on( 'error', handleErrors )
Expand All @@ -57,7 +83,7 @@ function stylesIe() {
// mqr expands the minified file
.pipe( gulpCleanCss( { compatibility: 'ie8' } ) )
.pipe( gulpRename( {
suffix: '.ie',
suffix: '.ie8',
extname: '.css'
} ) )
.pipe( gulp.dest( configStyles.dest ) )
Expand Down Expand Up @@ -215,7 +241,8 @@ function stylesNemoIE() {
}

gulp.task( 'styles:modern', stylesModern );
gulp.task( 'styles:ie', stylesIe );
gulp.task( 'styles:stylesIE8', stylesIE8 );
gulp.task( 'styles:stylesIE9', stylesIE9 );
gulp.task( 'styles:ondemand', stylesOnDemand );
gulp.task( 'styles:featureFlags', stylesFeatureFlags );
gulp.task( 'styles:knowledgebase', stylesKnowledgebaseProd );
Expand All @@ -226,6 +253,7 @@ gulp.task( 'styles:nemo', [
'styles:nemoProd',
'styles:nemoIE'
] );
gulp.task( 'styles:ie', ['styles:stylesIE8', 'styles:stylesIE9'] );

gulp.task( 'styles', [
'styles:modern',
Expand Down
Loading