While converting a .css file to .scss I am getting a Sass syntax error in safari only hack section.
At the following part of the code its throwing Invalid CSS after "...tio:0) { #media": expected media query (e.g. print, screen, print and screen), was "{" error.
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { #media
{
// some code here
}}
Your media query is invalid, you have a media query inside your media query which has no conditions.
Try this:
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
// some code here
}
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { #media { // some code here }}
should be
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { // some code here }}
You have a media query inside a media query, which is invalid.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
You can use javascript to properly detect safari, something like this:
function isiPad() { return (
(navigator.userAgent.toLowerCase().indexOf(/iPad/i) > -1));}
Related
variables.scss:
$large-screen: 1200px;
$screen-large: #{($large-screen - 1)};
$large-down: 'screen and (max-width: #{$screen-large})';
#debug $screen-large;
In another scss file:
#import '../../styles/variables.scss';
#media #{$large-down} {
my styling…
}
Problem: It doesn’t apply the "My styling" part.
If I replace the #media line with #media only screen and (max-width: 1199px) { it does work.
Any idea what I am doing wrong?
Update: I discovered that $screen-large: #{($large-screen - 1)}; results in "1200px - 1" rather than "1199px". Is there a way in SASS to make it do the calculation instead of take it as a string?
I've tried $screen-large: calc($large-screen - 1); but it still returns that whole line as a string rather than do the calculation.
Found the solution:
variables.scss:
$large-screen: 1200px;
$screen-large: ($large-screen - 1); // Now it no longer interpolates to a string.
$large-down: 'screen and (max-width: #{$screen-large})';
In another scss file:
#import '../../styles/variables.scss';
#media #{$large-down} {
my styling…
}
So you see a lot of code examples do something like
#media all and (max-width:640px) {
div {
background-color:red;
}
}
Now afaik, the keywords "all" and "screen" and some others are for selecting the device type this applies to and the line is just supposed to provide a boolean output.
Since "all" applies to every device, one would imagine that its always 1 and (1 && x) always equals x so "all and" should make no difference whatsoever.
I tried out
#media (max-width:640px) {
div {
background-color:red;
}
}
and at least my browsers agree. Is there anything else I should know about?
See the spec: https://www.w3.org/TR/css3-mediaqueries/
The ‘print’ and ‘screen’ media types are defined in HTML4. The complete list of media types in HTML4 is: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’. Also, ‘all’ is used to indicate that the style sheet applies to all media types.
...
A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.
/* I.e. these are identical: */
#media all and (min-width:500px) { … }
#media (min-width:500px) { … }
/* As are these: */
#media (orientation: portrait) { … }
#media all and (orientation: portrait) { … }
In addition, the following media types: 'tty', 'tv', 'projection', 'handheld', 'braille', 'embossed', 'aural' have been deprecated in Media Queries Level 4.
all refers to: all media type devices, print: used for printing, screen: used for desktop screens, mobiles, tablets etc and speech: used for screen-readers that "reads" the page out loud.
In your case where you have specified media type as all, you can try printing the page by right clicking. The printed page will have all the styles applied in short it will exactly look the same.
Now take another example where you specify the media type as screen. If you try to print the page you will not see all the styles getting applied to the page as the styles were defined for screen alone.
If one does not specify all in media query it is by default taken as all.
#media screen {
div {
color: blue;
}
.print{
display: none;
}
}
#media print and (min-width: 200px){
div{
color: tomato;
}
div.not('.example'){
display:none !important;
}
.print{
display: block;
}
}
<div class="example">
<div>Try printing me. See if this blue color appears while printing</div>
<div class="print">I am only visible while printing.</div>
</div>
this is all my code:
/* 1366 ----------- */
#media (min-width : 1326px) and (max-width : 1639px){
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg768.jpg')!important;
background-repeat:no-repeat!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
background-attachment:fixed!important;
}
}
/* 1680 ----------- */
#media (min-width : 1640px) and (max-width : 1800px){
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg1050.jpg')!important;
background-repeat:no-repeat!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
background-attachment:fixed!important;
}
}
/* 1920 ----------- */
#media and screen (min-width : 1800px){
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg1200.jpg')!important;
background-repeat:no-repeat!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
background-attachment:fixed!important;
}
}
the 1920 is working perfectly and if i for example drag my windows bar to one of the sites it automaticly get rescaled and keeps the middle container on the background matching with the resize of the website.
I tried it with the 1680 res and a website called "Screenfly" but there the container stuck in the middle so i thought it still uses the 1920 res since changes to bg1050.jpg didnt change anything.
Than i jumped to 1366 because i got a notebook with that resolution but the result was the same. Any suggestions how to get the other devices to work as the 1920x1080 and 1920x1200 resolution?
You are using !important tags because it cannot override the previous query. To solve that you must use media queries in descending order according to screen size. For example:
#media screen and (max-width:900px){
//some code here
}
#media screen and (max-width:768px){
//some code here (Codes you write in here will override the codes from the previous media query which is 900px without using !important tags)
}
By doing that you can get rid of !important tags. You should also use proper media queries like this.
One example of proper media query structure: #media screen and (max-width:1080px)
As I have mentioned in the title - chrome is not picking up the media queries. For example:
#media only screen and (min-width: 481px) and (max-width: 784px)
#media (min-width: 481px) and (max-width: 784px)
It works if I leave only one width property:
#media only screen and (min-width: 481px)
All other browsers picks this up ok. Did anyone of you came to this issue as well and can help me to get on track?
Edit
I'm using the latest version of chrome (Version 32.0.1700.76 m)
There is a bug in chrome where it won't read media queries without the correct spacing. If you look at your bundled source code (when minified) you will probably notice that #media (min-width: 481px) and (max-width: 784px) has been transformed to #media (min-width: 481px)and (max-width: 784px) (notice the missing space after the bracket).
This article explains the problem well and also a fix which is basically to create a class that implements IBundleTransform and implement Process at which point you can check for this problem and fix it:
public class CssMinifyMQ : IBundleTransform {
public void Process(BundleContext context, BundleResponse response) {
response.ContentType = "text/css";
response.Content = Regex.Replace(response.Content, "(\\) and ( )?\\()", ") and (");
}
}
bundles.Add(
new Bundle("~/CSS/Base", new CssMinifyMQ()).Include("~/Content/Base/*.css")
);
HTH!
I'm new to media queries and to jQuery. What I'd like to do is swap header images on a mobile site when the user switches orientation. What I've got so far works, oddly, if the user refreshes the page, but gets it wrong on initial load. Here's the script:
$( document ).ready(function() {
if($.mobile.media("only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)")) {
$("#FlexgridHeader img").attr("src", "http://example.com/path/to/image/header-480x75+.png");
} else {
$("#FlexgridHeader img").attr("src", "http://example.com/path/to/image/headers/header-320x75+.png");
}
});