I just stumbled across this question and I noticed the user is using some notation I've never seen before:
#font-face {
/* CSS HERE */
}
So is this # symbol something new in CSS3, or something old that I've somehow overlooked? Is this something like where with an ID you use #, and with a class you use .? Google didn't give me any good articles related to this. What is the purpose of the # symbol in CSS?
# has been around since the days of #import in CSS1, although it's arguably becoming increasingly common in the recent #media (CSS2, CSS3) and #font-face (CSS3) constructs. The # syntax itself, though, as I mentioned, is not new.
These are all known in CSS as at-rules. They're special instructions for the browser, not directly related to styling of (X)HTML/XML elements in Web documents using rules and properties, although they do play important roles in controlling how styles are applied.
Some code examples:
/* Import another stylesheet from within a stylesheet */
#import url(style2.css);
/* Apply this style only for printing */
#media print {
body {
color: #000;
background: #fff;
}
}
/* Embed a custom web font */
#font-face {
font-family: 'DejaVu Sans';
src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}
#font-face rules define custom fonts for use in your designs that aren't always available on all computers, so a browser downloads a font from the server and sets text in that custom font as if the user's computer had the font.
#media rules, in conjunction with media queries (formerly only media types), control which styles are applied and which aren't based on what media the page is being displayed in. In my code example, only when printing a document should all text be set in black against a white (the paper) background. You can use media queries to filter out print media, mobile devices and so on, and style pages differently for those.
At-rules have no relation to selectors whatsoever. Because of their varying nature, different at-rules are defined in different ways across numerous different modules. More examples include:
Conditional rules
Keyframe animations
Paged media
(this list is far from exhaustive)
You can find another non-exhaustive list at MDN.
# is used to define a rule.
#import
#page
#media
#font-face
#charset
#namespace
The above are called at-rules.
An example of #media that might be useful to illustrate it further:
#media screen and (max-width: 1440px)
{
span.sizedImage
{
height:135px;
width: 174px;
}
}
#media screen and (min-width: 1441px)
{
span.sizedImage
{
height:150px;
width: 200px;
}
}
This will vary the size of the image conditionally on the size of the screen, using a smaller image on a smaller screen. The first block would address screens up to width 1440px; the second would address screens larger than 1440px.
This comes in handy with things like tabs that float drop or scroll on smaller screens; you can often drop the font size of the tab labels down a point size on smaller screens and have them all fit.
The ProBoards CSS style also uses these as variables.
Here's a small snipptt from one of their CSS pages:
#wrapper_width: 980px;
#link_color: #c06806;
#link_font: 100% #default_forum_text_font_family;
#link_decoration: none;
#wrapper { width: #wrapper_width; margin: 0 auto; overflow-x: hidden; }
table { table-layout: fixed; }
a { cursor: pointer; color: #link_color; font: #link_font; text-decoration: #link_decoration; }
NOTE: not native, see first comment.
# is used as a rule specification. Like #font-face
Related
First, let me say I've looked all over for this solution and am completely stuck. I've followed suggestions of importing media queries from a separate file after my other css rules, I've used an ancestor to target the span in the query to try and override the inline styling, I've tried just about everything else I can think of.
Currently, I have a span with nested spans that I want to render when the page width is between 0px and 600px. I am using react so I had to follow their guidelines for inline styling. Essentially I created an object with the display: none styling rules as the key-value pair. I then passed that to the JSX for the span. So essentially, it looks like this.
const hidden = {
display: 'none'
}
...
<span className="blah" style={hidden}>
<span>blah</span>
<span>: </span>
{deleteButton2} //this is a separate span generated conditionally, doesn't relate to this.
</span>
So now I have in my media query:
#media screen and (min-width: 0px) and (max-width: 600px) {
//other rules that work fine
...
.blah-ancestor > .blah {
display: inline //I've tried inline, inline-block, and block, none of which are working.
}
}
Please, I really need some help here. I'm quite literally pulling my hair out over this and I have 0 tools in my toolbelt to deal with this kind of bug as I've never run into something quite like this yet.
Inline styles always have priority over internal or embedded CSS, and over external CSS. This is shown to some degree on the <style> MDN documentation.
You could simply remove the inline styles and use two media queries or the mobile-first approach to show/hide the .blah.
Here is the mobile first approach:
// Smallest screens 0px - 600px, no media query
.blah-ancestor > .blah {
display: inline;
}
// Small screens above 600px
#media screen and (min-width: 601px) {
.blah-ancestor > .blah {
display: none;
}
}
This way you completely get rid of inline CSS and with that, you eliminate some of the priority issues.
I have a design where I need to be able to change colours on a page depending on the input in the cms.
To do this I'm adding one class to a containing div and I'll change the colours according to that surrounding class.
There's going to be a set amount of colours. (8, I think. It's not been decided yet.)
My idea was to use a mixin to accomplish this. eg.
Example HTML
<div class="color-1>
<h1 class="h1">My Title</h1>
</div>
Example LESS Mixin
.color() {
#color_1: red;
.color-1 & {
color: #color_1;
}
#color_2: blue;
.color-2 & {
color: #color_2;
}
//etc.....
//I have a similar mixin for background-color -> .bg-color();
}
Example LESS
.h1 {
.color();
background-color: #fff;
#media screen and (min-width: 960px) {
color: #fff;
.bg-color();
}
}
Problem
The problem is that the specificity for the mobile version is higher than the desktop one.
Example rendered CSS
//Could be color-2, color-3 etc. depending on class, doesn't matter for this example
.color-1 .h1 { //This would override the media query below due to 2 classes
color:red;
}
.h1 {
#media screen and (min-width: 960px) {
color: #fff;
background:color: red;
}
}
This issue will effect the rest of the page. Is there a better way to accomplish what I'm looking for without sticking important tags everywhere?
________________Edit________________
For clarity, the site I'm building will allow logged in users of a certain tier to change the main colour of their personal page, I still need the client to decide on how many colours but I think it will be around 8. Instead of writing out each of those, or having a separate stylesheet for each one (Maintaining that would be horrible) I decided to create a Mixin for it. There will be mutiple background colours and text colours that need to change, and due to the design they will need the change to different colours at mobile desktop and tablet.
Thinking of the nature of CSS something must be amiss with your code as the browser will always take the last value you give to a certain selector.
For example the following h1 would be red:
<h1 class="foo">Headline</h1>
.foo { color: blue; }
.foo { color: red; }
And it will change it's color when you give it a different value inside a mediaquery if the mediaquery is matched. So in the example below the h1 will be green when the viewport exceeds 399px in width:
<h1 class="foo">Headline</h1>
.foo { color: blue; }
.foo { color: red; }
#media all and (min-width: 400px) {
.foo { color: green; }
}
What's confusing me is the difference between your LESS code and what's in the outpout CSS. I'd suggest you have a second look at your selectors and/or variables. Indentation can be quite confusing as well, so may be you should opt for a mobile-first LESS file and then create others for mediaqueries (and import those in a main less file keeping the order intact).
I am new to learning responsive design. What I have noticed on my journey is that when I put media queries at the bottom of the stylesheet, everything works flawlessly in regards to breakpoints. If I put the media queries at the top of the stylesheet, nothing works, and only recently I found out that I need to add !important and max-DEVICE-width ( as opposed to max-width) to the css that is being changed.
Why is this? Why do the media queries work on both desktop and mobile when put at the bottom of the stylesheet.
Why is it that when I put media queries on the top of the stylesheet I need to add !important and also max-DEVICE-width in order for the breakpoints to work on desktop and mobile?
Because css is read from top to bottom. The rule that is set last, is the one that will be executed.
Translating, it is like this:
#media (max-width: 600px) { //If my screen fits this size
.text {
color: red; //Paint it red
}
}
.text {
color: yellow; //Now, forget about everything and paint it yellow!
}
When you add !important is like saying:
#media (max-width: 600px) { //If my screen fits this size
.text {
color: red !important; //Paint it red, and don't change it ever!!!
}
}
.text {
color: yellow; //Ok, I'm not going to paint it yellow....
}
CSS is read from top to bottom.
Everything that is below some other css will overwrite what's on top of it.
It is possible however to use !important at the end of a CSS parameter to make it overwrite everything else
body{
background-color: black !important;
}
body{
background-color: pink;
}
The background-color will be black.
If you remove the !important, it will be pink.
Media queries cascade with the rest of the stylesheet. You can intersperse media queries within your stylesheet, and so you can also cascade styles as needed.
For example:
.my-class {
color: red;
}
.my-class--modifier {
color: blue;
}
#media screen and (min-width: 760px) {
.my-class--modifier {
color: green;
}
}
.some-other-class {
width: 200px;
}
#media screen and (min-width: 760px) {
.some-other-class {
width: 700px;
background-color: gray;
}
.some-other-class .my-class {
border: 2px solid red;
border-radius: 4pt;
}
}
This works precisely due to CSS's cascading nature. You can organize media queries as required based on sections, individual selectors and more.
Basically you are using media queries when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport, or environment (such as ambient light conditions).
When you started designing, you generally started doing it for one device of known specifications. So you design it according to you current device and then apply it for other screen sizes.
Hence the order goes like this: Make complete design --> Add the media query to fit for desired screen sizes at the bottom.
It is preferrable to write the query at the bottom became of precedence. That will save you from stress of using important! everytime.
I just stumbled across this question and I noticed the user is using some notation I've never seen before:
#font-face {
/* CSS HERE */
}
So is this # symbol something new in CSS3, or something old that I've somehow overlooked? Is this something like where with an ID you use #, and with a class you use .? Google didn't give me any good articles related to this. What is the purpose of the # symbol in CSS?
# has been around since the days of #import in CSS1, although it's arguably becoming increasingly common in the recent #media (CSS2, CSS3) and #font-face (CSS3) constructs. The # syntax itself, though, as I mentioned, is not new.
These are all known in CSS as at-rules. They're special instructions for the browser, not directly related to styling of (X)HTML/XML elements in Web documents using rules and properties, although they do play important roles in controlling how styles are applied.
Some code examples:
/* Import another stylesheet from within a stylesheet */
#import url(style2.css);
/* Apply this style only for printing */
#media print {
body {
color: #000;
background: #fff;
}
}
/* Embed a custom web font */
#font-face {
font-family: 'DejaVu Sans';
src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}
#font-face rules define custom fonts for use in your designs that aren't always available on all computers, so a browser downloads a font from the server and sets text in that custom font as if the user's computer had the font.
#media rules, in conjunction with media queries (formerly only media types), control which styles are applied and which aren't based on what media the page is being displayed in. In my code example, only when printing a document should all text be set in black against a white (the paper) background. You can use media queries to filter out print media, mobile devices and so on, and style pages differently for those.
At-rules have no relation to selectors whatsoever. Because of their varying nature, different at-rules are defined in different ways across numerous different modules. More examples include:
Conditional rules
Keyframe animations
Paged media
(this list is far from exhaustive)
You can find another non-exhaustive list at MDN.
# is used to define a rule.
#import
#page
#media
#font-face
#charset
#namespace
The above are called at-rules.
An example of #media that might be useful to illustrate it further:
#media screen and (max-width: 1440px)
{
span.sizedImage
{
height:135px;
width: 174px;
}
}
#media screen and (min-width: 1441px)
{
span.sizedImage
{
height:150px;
width: 200px;
}
}
This will vary the size of the image conditionally on the size of the screen, using a smaller image on a smaller screen. The first block would address screens up to width 1440px; the second would address screens larger than 1440px.
This comes in handy with things like tabs that float drop or scroll on smaller screens; you can often drop the font size of the tab labels down a point size on smaller screens and have them all fit.
The ProBoards CSS style also uses these as variables.
Here's a small snipptt from one of their CSS pages:
#wrapper_width: 980px;
#link_color: #c06806;
#link_font: 100% #default_forum_text_font_family;
#link_decoration: none;
#wrapper { width: #wrapper_width; margin: 0 auto; overflow-x: hidden; }
table { table-layout: fixed; }
a { cursor: pointer; color: #link_color; font: #link_font; text-decoration: #link_decoration; }
NOTE: not native, see first comment.
# is used as a rule specification. Like #font-face
The cascade is what makes CSS special and powerful. But in the case of media queries, overlap can seem problematic.
Consider the following CSS (continuing rules for CSS media query overlap):
/* Standard - for all screens below 20em */
body { color: black; font-size: 1em; }
/* Query A - slightly wider, mobile viewport */
#media (min-width: 20em) and (max-width: 45em) {
body { color: red; } /* supposed to be unique for this width */
}
/* Query B - everything else */
#media (min-width: 45em) {
body { font-size: larger; } /* because viewport is bigger */
}
So when the screen is exactly 45em wide, the overlap at 45em will be treated according to the standard CSS cascade:
All max-width: 45em definitions will be applied first,
and all min-width: 45em will be applied thereafter.
Consider these two conditions:
All text would normally be black, but Query A is unique and has color: red.
Since Query B is for larger viewports, it's text has the CSS font-size: larger.
Therefore, at a width of exactly 45em, we'd get big and red text. What would be the best solution to avoid this?
I see two possibilities:
Re-declare the text to have color: black in Query B, but then you're managing two declarations if you choose to change the color in the future. (Of course, not such a problem with this single line of code, but imagine there's a lot of other declarations and selectors.)
Avoid overlap by using pixel values like max-width: 799px and min-width: 800px, but then you're using pixels — I guess they could be 49.9375em and 50em, respectively. Though what if the default is no longer 16em and something gets rounded? And we're still not certain what happens at that gap. (A black hole that breaks the space-time continuum?)
Both have their drawbacks... any other ideas?
The only reliable way to create two mutually exclusive #media blocks for any given media query is to use not to negate it in one of the blocks. Unfortunately, this means repeating your media query once for each #media block. So, instead of this for example:
#media (max-width: 49.9375em) {
body {
color: red;
}
}
#media (min-width: 50em) {
body {
font-size: larger;
}
}
You would have this:
/*
* Note: Media Queries 4 still requires 'not' to be followed by a
* media type (e.g. 'all' or 'screen') for reasons I cannot comprehend.
*/
#media not all and (min-width: 50em) {
body {
color: red;
}
}
#media (min-width: 50em) {
body {
font-size: larger;
}
}
Interactive jsFiddle demo
This is very effective at closing the gap with range media features like width and height since it essentially turns this into an either-or scenario. But, like your first two options, it isn't perfect: as mentioned, you have to repeat the same media query twice, and add not to one of them. There is no if/else construct for #media as described in Conditional Rules 3.
Although I mention this in my answer to your previous question:
From my experiments it would seem Safari on iOS rounds all fractional pixel values to ensure that either one of max-width: 799px and min-width: 800px will match, even if the viewport is really 799.5px (which apparently matches the former).
It should be noted, still, that I've noticed some quirks when it comes to rounding. That said, I haven't been able to find a fractional value that would evade both media queries and end up not receiving styles from either set of rules (which, by the way, is the worst that can happen, so don't worry about potentially creating a space-time rift). That must mean browsers — at least, Safari as I've tested — do a reasonable job of ensuring they satisfy media queries even if you have values that differ (by exactly 1 CSS pixel).
When it comes to units with larger gaps that can be observed on desktop browsers, though, like ems, there is a much larger margin of error. For example, one comment suggests using 49.99999em instead of something more arbitrary than 49.9375em, but apparently there is a difference, at least with a default font size of 16px.
I simplified your code, changed the media queries to use decimal values, and put the code in jsFiddle:
#media (max-width: 49.9375em) {
body {
color: red;
}
}
#media (min-width: 50em) {
body {
font-size: larger;
}
}
If you resize the Result pane to exactly 800 pixels (the text will update to guide you along), you actually end up with different results depending on whether #media (max-width: 49.9375em) is used, or #media (max-width: 49.99999em) is used (I was surprised by this too)...
Either way, you're right: option 2 has its drawbacks too. I'm not particularly fond of it, to be honest, because I wouldn't want to crack my head over device and user agent quirks which are out of my control. If you're like me, I suppose it would be better to go through the inconvenience of redeclaring your rules at the cost (?) of being more vigilant around your code, as that's at least still within your control as an author.
For me, the best way is to keep a gap of 0.01em:
#media (min-width: 20em) and (max-width: 44.99em) {
body { color: red; } /* supposed to be unique for this width */
}
#media (min-width: 45em) {
body { font-size: larger; } /* because viewport is bigger */
}
I recommend you to read this article for the details and the comparison of the different solutions to prevent media query overlapping.
Cheers,
Thomas.