I made a huge mistake and I'm looking for some help.
After building a site with CSS, mobile-first responsive, with respond.js as a polyfill, after I tested it in IE compatibility mode during developing I realized at the end that there's a big conflict between respond.js and the javascript used by the CMS and the Internet Explorer 8 blocks everything from rendering.
I decided to drop the polyfill entirely and go the SASS way with it, using a MQ mixin.
Right now the problem is that IE8 is seeing the mobile version of the website
(sorry I can't give you a link to it)
I have included conditionizr for < ie9 and I have used css2sass to get my CSS nested a little.
I found a great MQ mixin by Stuart Robson (here) ** that I have not yet started to add it, the question is, do I have any other option than to go and edit everywhere I used mq in the code?
The mixin I think I have to use looks like this ** (adapted it a little to make a better use of it for my problem):
#mixin mq($point, $IE9: true, $query1: min, $query2: width) {
#if $IE9 == true{
#media screen and (#{$query1}-#{$query2}: $point +px) {
#content;
}
.lt-ie9 & {
#content;
}
}
#else {
#media screen and (#{$query1}-#{$query2}: $point +px) {
#content;
}
}
}
I'm not going to debug the JavaScript code to make the polyfill work. I have tried several other scripts (including css3-mediaqueries) but I dropped the idea of help from javascript and I want to go the SASS way.
Given that there's a chunk of almost 6k lines of SASS code, is there any SASS way to help me with adding the mixin somehow so that I end up getting something like this?
#media screen and (min-width: 320px) {
body {
margin: 0;
}
}
.lt-ie9 body {
margin: 0;
}
I learned my lesson, started using BrowserStack and I will only go with that mixin from now on. There's still the problem at hand that has to be fixed..
Thanks in advance.
Regards
I will edit all the MQs to use the new mixin and I also have to learn more SASS and stop asking silly questions about it! :)
Thanks everyone!
Related
I set a few frequently used live templates like:
sm
#media (max-width: #screen-sm-max) {
$START$
}
md
#media (max-width: #screen-md-max) {
$START$
}
lg
#media (max-width: #screen-lg-max) {
$START$
}
They are all working well in .less file, however when I switch to SCSS, they are all not working.
I have checked live template context to CSS.
What can I do to make it works with SCSS file too?
When creating live template, make sure correct context are checked, for live template I wrote above, I should check ruleset list. Of course, if you don't know which one to check, you can just check all checkbox in the program language context. There shouldn't have any big deal.
This is probably a VERY simple question, but I am having a hard time! I have an external CSS file that is working fine and is responsive. As to be expected, the positioning of a few elements is a little "off" when viewed in Firefox. I wanted to write a media query for when the page is viewed in Firefox, and adjust the margins, etc. of a specific element. I thought you could use the prefix:
#-moz-document url-prefix()
as a media query, but that didn't do anything.
How do you write a media query for when the page is viewed in Firefox and Safari?
You can use the selector you mentioned, e.g.:
#-moz-document url-prefix() {
h1, p{
color:pink;
}
}
See this live: http://codepen.io/panchroma/pen/gpXdRj
More about Firefox vendor selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions#font-family
More browser selectors and hacks: http://browserhacks.com
FWIW, have you double-checked that your FireFox layout issues aren't related to browser default settings and that they couldn't be solved by using a different CSS reset? I've had success in the past with normalize.css
Good luck!
This query only affect to mozilla navigator:
#media all and (min--moz-device-pixel-ratio:0) and (max-width: 680px){...}
And this is only for IE:
#media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) and (max-width: 680px){...}
More information here:
https://developer.mozilla.org/es/docs/CSS/Media_queries
Best wishes!!
Im working on a new project and started to use grunt-sass instead of grunt-contrib-sass because its alot faster. I also removed compass. The thing now is that i cannot find a way to add 'susy' grid and 'breakpoint' anymore. I used to put this in a config.rb file but im not using this anymore because im not using compass.
So i added all susy style in my project and thats works fine but its not my preferred method. But cant find a way to add breakpoint.
Is there a way to add these? Or do i have to use compass for this?
Sorry for my bad english, not very good at it.
No need for Compass, there's a new susy-media breakpoint Mixin designed to work with LibSass which is what you are essentially using via grunt-sass. That's what I use and it works great. So you'd define some Susy grid variables and breakpoints in a _vars.scss partial for example:
// Define susy.
$susy: (
columns: 12,
gutters: .8,
);
// Define some breakpoints.
$bp-narrow: 30em; // 480px
$bp-med: 48em; // 768px
Now put it all together, say in _layout.scss for example:
// the breakpoint (media query)
#include susy-media($bp-med) {
// now a grid
.l-foobar-wrap {
.foo {
#include span(7)
}
.bar {
#include span(5 at 8)
}
}
}
For more info, read the susy docs, it's all there for you and this works with grunt-sass (LibSass). It's part of my everyday workflow.
Note, as an alternative for really nice media query rendering and retina workflows, I now use Include Media rather than susy-media and it also works fine with LibSass.
I’ve hacked around this before by writing my own mixins, but I get a feeling there must be an inbuilt method in Susy to get around this problem.
I have a mobile-first grid which uses my default $grid-padding, say 1.5em, but once I hit my first breakpoint I switch to a wider $grid-padding-tablet, perhaps 3em, and so on through other breakpoints.
In addition, some elements also use the bleed mixin to give the visual impressions of infinite width.
Is there an easy way, just using something like #include container rather than building my own media queries and mixins to accomplish this?
The built-in technique for this is the with-grid-settings mixin (documentation):
#include at-breakpoint($tablet) {
#include with-grid-settings($padding: $grid-padding-tablet) {
// your tablet code here
}
}
Does anyone know what is wrong with this rule?
#media screen and (-webkit-min-device-pixel-ratio:0) {
#nav-main li.c_course div{margin-left:1px !important;}
#nav-main li.c_course div{margin-left:1px !important;| margin-right:0px !important;;}
#nav-main li.c_course div div{margin-left:0px !important;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#nav-main li.c_course div{margin-left:1px !important;}
}
I researched it at media syntax possible combinations. It seems to be valid code (judging by the post even though the 7.3 Recognized media types spec doesn't list the syntax the way the OP does).
Is it supposed to be positioned somewhere else in the .css or what?
Thanks
Using the code:
#media screen and (-webkit-min-device-pixel-ratio:0)
Is a way to target just webkit browsers as it matches a webkit browser with a minimum pixel ratio of zero which in affect is every webkit browser. The issue is that the webkit prefix won't validate against W3C standards as it's vendor specific - it should be used as a last resort and if you don't mind the CSS failing validation.
Here's some info www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio.
It appears the rule should be written as
#media screen and (min-device-aspect-ratio:0){ ... }
Thing is, I don't know if "0" is a valid value. The spec uses a ratio and I don't know what the coder meant by using "0". "0" means nothing anyway---so the statement seems meaningless. www.w3.org/TR/css3-mediaqueries