I am new to web development, i am trying using foundations media query. However the following code that I have typed inside a style.css file does not seem to work.
What have I done wrong, should it be included in the style.css file.
#media only screen and (min-width: 40.063em) {
font-size:11ems;
background:color:red;
border-left:1px solid green;
}
First thing I can see is you don't seem to be targeting anything inside your media query block. e.g. .class{property:value;}
Also, your background color property should be background-color:red; and I think it should be em instead of ems for font-size
Related
I've started using Sass and took my old css code and worked with it. For compiling I used prepros which has the option to compress CSS which saves some space.
The Problem I have is that when the SCSS code gets compiled into 1 line at the end the media query is empty
This is what my SCSS looks like, as an example
#media all and (max-width: 900px) {
body {
background-color: red; }
}
and this is what gets compiled
body{background-color:blue;}#media all and (max-width: 900px){}
I'm not 100% sure with spaces but you get the point I think, it's in 1 line of code.
When putting the thing into a new line it get's correctly highlighted in sublime text aswell.
Is there a way to still compress my css but get media queries to work?
Edit: I checked and the output looks exactly like this
#media all and (max-width: 900px){}
So it's not a bug with a missing space behind "and"
Edit2: Still not working, this is the exact code in my sublime text which doesn't work in the browser.
.overlay{-webkit-filter:blur(0);opacity:1;transition:all 0.5s ease-in-out}#media all and (max-width: 900px){}
Sublime doesn't think its right either http://i.imgur.com/9lTP3ux.png
Where did my Code go? why is the compressed CSS missing the content of the media query
I was facing this problem too a few days ago, I don't think it was the case before the prepros update, but I have not found a way to make it work, unless I place the media query within the selector instead of outside.
So if you actually do it like:
body{
#media all and (max-width: 900px){
background-color: red;
}
}
Prepros shoudl compile it correctly. This is the way SASS intends the media queries to work, but since normal CSS is basically valid SCSS, I think prepros really should start supporting it the other way round again.
body{
background-color:red;
#media all and (max-width:900px)
{
background-color:blue;
}
}
I know there are 2 ways to add Media queries:
HTML LINK:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
CSS:
#media all and (max-width: 1024px) {
......
}
I have read the documentation and I understand the obvious difference between the 2 methods. However, the following are 2 questions I am in doubt about if you can clarify please:
Does the browser handle the HTML Media Link differently to the CSS Media Query? What I mean is, I know if CSS media queries are added inside css, all the css files are downloaded to all devices anyways and only the respective media queries are taken into effect when the browser interprets the compiled css. But if the Media Link is added in HTML, does it mean that browsers will only download the foo.css only when for devices with matching specified width? Is there a difference in the way browser handles the HTML media links when compared to Css media queries or is it all the same but just different ways of adding to the webpage?
Lets say if foo.css also has media queries for smaller widths other than 1024px, something like this:
body {
padding: 10px;
}
#media all and (max-width: 900px) {
body {
padding: 5px;
}
}
#media all and (max-width: 800px) {
body {
padding: 0px;
}
}
If the above file is added using HTML Link like this:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
Would this become nested media query the way browsers look at it? What I dont understand is, if the above is added using html link, I dont know if the browser will actually look at it like this which becomes invalid:
#media all and (max-width: 1024px) {
body {
padding: 10px;
}
#media all and (max-width: 900px) {
body {
padding: 5px;
}
}
#media all and (max-width: 800px) {
body {
padding: 0px;
}
}
}
So my question is, if I have further media queries inside the css file that is added using HTML media link, is that valid?
EDIT:
I had a look in the developer tool using chrome from my desktop and I can see that the tablet files are downloaded even when browsed from a desktop device:
So for question 1, is it safe to assume all browsers included older ones and mobile browsers do the same thing i.e download all files even if they are placed at HTML links?
For question 2, I can see that chrome does use the media queries that are inside tablet's css when the browser screen is resized to tablet width. The css file linked for 1024px in html are taken as media="(max-width: 1024px)". But then, wouldn't that mean the media queries placed inside tablet's css file are actually nested media queries? Although it works, isnt it logically wrong? Does some stricter browser not consider this as valid?
Here is what W3C has to say about this:
The media attribute says which media the resource applies to. The
value must be a valid media query.
[...]
However, if the link is an external resource link, then the media
attribute is prescriptive. The user agent must apply the external
resource when the media attribute's value matches the environment and
the other relevant conditions apply, and must not apply it otherwise.
Note: The external resource might have further restrictions defined within
that limit its applicability. For example, a CSS style sheet might
have some #media blocks. This specification does not override such
further restrictions or requirements.
I tested the behavior in Chrome using the following markup:
<link rel="stylesheet" href="ge-960.css" media="screen and (min-width: 960px)">
<link rel="stylesheet" href="lt-960.css" media="screen and (max-width: 959px)">
Apparently, Chrome downloaded all CSS files regardless of screen resolution.
However, it applied the rules from matching stylesheet(s) only
And it honored all matching #media rules within the stylesheet
Regarding the stylesheet download, here is what the current spec draft says:
User agents should re-evaluate media queries in response to changes in the user environment, for example if the device is tiled from landscape to portrait orientation, and change the behavior of any constructs dependent on those media queries accordingly.
This means you can’t just evaluate each media-query and then download the appropriate stylesheets because the environment can change, causing the re-evaluation of these media-queries. I think it could be optimized, but for now all browsers download all stylesheets, regardless of media-queries.
For your second question, specs don’t mention any difference between HTML- and CSS-declared media-queries. Nested media-queries are allowed since CSS3, and putting #media-rules in a stylesheet which is already tagged with media="…" should be the same as a pure CSS nested media-query.
With HTML media queries, the CSS files are downloaded whether or not the media query is satisfied or not. But the prasing of unwanted CSS is kind of deferred and this advances your initial render. In a way, you can think of making it, non-render blocking. But with CSS media queries, they are completely parsed and processed whether or not the query is satisfied.
I'm building an HTML Email, and would like to use #media query to display one banner for mobile and another for desktop/webmail screens. I know most email clients strip out the css found in the tag. Is there a way to put the css inline? Here's an example of the code in currently..
<style type="text/css">
#media (max-width: 1000px){
/* rules defined inside here are only applied to browsers that support CSS media queries and the browser window is 480px or smaller */
img#standardBanner{display:none !important}
img#mobileBanner{display:block !important}
}
</style>
Also is there any other way to be able to do this? I'm not having too much luck.
Thanks!
To answer your question, for a pure css solution the answer would be no it is not possible.
You could though serve the images from a server and use a scripting language like PHP to get the device information of the user and then serve the appropriate image based on that using PHP function header.
<style type="text/css">
img#standardBanner{display:block !important}
img#mobileBanner{display:none !important}
#media (max-width: 1000px){
img#standardBanner{display:none !important}
img#mobileBanner{display:block !important}
}
</style>
I am currently using media query in my css but my site is still looking bad. Is there a way to determine first the witdh of a browser and then load different index files?
To post some code here is my media query:
#media screen and (max-width: 600px) {
.topbar{
opacity: 0;
}
....
}
I would say do some more research on building your CSS but to answer your question:
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://mobilesite.com";
}
</script>
It might be an idea to load different css files for different screen sizes; essentially moving the media selection from the css to the html:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css">
You might want to read Detect different device platforms using CSS for some related content.
Generally you want to aim to use the same .html file for your website, then use CSS to customise specifically for desktop or mobile. I know you may have very different ideas for the two sites, but it can all be done in pure CSS if your markup (html code) is good enough. Check out the CSS Zen Garden for how powerful CSS can be.
If you want to completely reset your css for the mobile site, just wrap the old css in a media query targeting screens screen and (min-width: 601px), and you will find your mobile site is completely unstyled
css has nothing to do with loading different index files according to the browser width.
If you want to style your elements differently using #media rules, make sure they are set close to the bottom of the page, in other words - after the main styles, because otherwise - they will be simply overwritten.
I am making custom template with MailChimp. I have yet to test it across several email clients, but so far my tests with gmail reveal that when I add this media query, not only does it not work, but it causes the entire html email to render without css. The other CSS works fine for gmail without the query. On other clients the media query works, and does not prevent the other CSS from working.
Is this a known issue with gmail (and others), or is there a way to accomplish this?
#media only screen
and (max-device-width : 480px) {
.bodyContent div{
font-size:24px;
}
h1, .h1{
font-size:36px;
}
h2, .h2{
font-size:28px;
}
h4, .h4{
font-size:28px;
}
.preheaderContent div{
font-size:24px;
}
}
Gmail doesn't support <style> in either <head> or <body>. Since media queries are embedded rather than inline, they can't be utilized in Gmail. Check out this handy chart from Campaign Monitor which details which styles and selectors are supported across various clients and apps.
I had the exact same problem with Gmail. In my case, I wrote a HTML for an email newsletter. The problem was that I was minifying the whole HTML (including the HEAD section where the media queries were), which apparently broke apart the CSS syntax somehow, making Gmail to partially interpret css classes contained within the #media query. If this is your case, you can do two things:
Don't minify the HEAD section (what I did). Leave it untouched and put your media queries there.
Try different minifiers and go through the minified media queries to make sure nothing got broken.
In any case, if you are creating an email newsletter, make sure that you inline as much CSS styles as you can, i.e.: add your styles directly to your tags with the "style" attribute instead of using CSS classes.