According to bootstrap-responsive.css file,the media query #media (max-width: 767px) is repeated meaning it occurs twice in the file.Why is it repeated?.
You can see the file here http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css
Hmmm, I certainly can't claim to understand what the developers intended when they wrote the CSS, but here's what I think...
I believe the repetition of media queries is just to provide greater modularization of the CSS file. Note that both #media (max-width: 767px) and #media (min-width: 768px) and (max-width: 979px) are actually present twice in the file, so it's not likely an anomaly.
The first declarations of these media queries appear to deal with classes that are added to elements to hide/show them at certain browser widths, so in effect selectively on different devices (specifying the display property). The second declarations seem to deal with the various classes that are foundational to Twitter Bootstrap's design principles, specifying styles (width, margin, min-height, etc.) of the various classes used in the 12-column grid system.
Classes of the first set can be applied at the whim of the developer, to hide/show certain elements when the page is viewed on various devices. Classes of the second set are applied a bit more rigidly than the first set, since they are a more defining characteristic of the framework's grid system (eg. You can give an element classes of both hidden-phone and visible-tablet from the first set and see the effects of both, but giving an element classes of span12 and span6 will cause only the last-given class to take effect).
It is because the first set of classes differs significantly in application from the second set of classes that the media queries declarations are declared twice, one for each set.
In Scalable and Modular Architecture for CSS (2012), Jonathan Snook comments on this concept of modularization, stating,
Yes, this does mean that the media query declaration may (and likely
will) get declared multiple times but it also allows for all
information about a module to be kept together.
(I apologize if I used the wrong terms when referring to styles/CSS/HTML! I'm still learning...)
Related
I'm just learning html and css and have just completed a landing page project. When I reviewed my css at the end, I realised that I had multiple media queries all for the same conditions (max-width) but applied to different elements.
I know that you can put multiple elements within a media query but what is best practice?
Currently I have each separate media query located just after the setup css for that element
i.e. #header is followed by #media (max-width:640px) #header{stuff;}}
Media queries were introduced in CSS3 are used for responsive CSS over different media types. Since usually the CSS code itself is applied for describing the presentation of the document or page, responsiveness is a separate feature altogether, so usually they are kept separate at the end of the CSS formatting codes. However, let me answer this question by stating the usage of both of the formats mentioned in the question.
At the end of code
Most templates of CSS available online usually keep their media queries at the bottom of the entire code making it easier to access and work with the responsiveness feature. Whenever the focus is more on "chasing device-widths" then this type of coding practice helps.
As observed, this allows to group together many basic CSS attributes that are applied over many elements.
Also, considering the cascading nature of CSS, the styling below usually (not always, refer this to know more) overwrites the styling present above. With #media queries present at the bottom of the stylesheet, it allows easy overwriting of relevant styles present above.
Finally ,as mentioned by #rguttersohn, media queries along with #keyframes are kept at the end with #keyframes usually above #media. This makes coding cleaner and easier to comprehend by others as well.
Below relevant styling counterparts
If styling is more layout-centric, it's highly useful to place #media queries next to their styling counterparts. This allows ease in editing the style and its corresponding #media query both in a single go.
This does mean that there is slightly more code, but these too can be cut down by grouping at breakpoints and section ends.
This type of styling is rarely seen in templates available online, however it's an ongoing trend.
To Summarize: I personally am of the opinion to keep all of the #media queries together at the bottom, but if I had to divide the labor of styling, I would opt for keeping the styles and #media queries together.
Also, given the broad and opinionated scope of this question, I think no answer can determined as right or wrong. I hope this answer brings enough light and information to the question.
In CSS 3 syntax we have #media to define responsive screen to apply.
I intend to use it as custom code-folding for CSS entries.
E.g.
#media {
div { color: green; }
}
So I wonder if there are any side-effect problems may arise when doing so?
First off, the #media CSS at-rule is not new to CSS3. It was introduced in CSS2, and has been supported by every browser including IE5+. What is new to CSS3 are media queries. The difference between media queries and #media are detailed in this answer.
An #media rule without an accompanying media query is equivalent to #media all, which, again, is understood correctly by every browser including IE5 and up. In other words, in terms of browser behavior there are no side-effects other than hiding CSS from IE4 and any other browsers from the late 90s (which don't support #media in any way, shape or form).
Note that this construct does not validate as either CSS2 or CSS3 in the Jigsaw CSS validator; this is a bug with the validator which may be due to the fact that CSS2 did not explicitly allow empty media types with #media. Having said that, what is stated in CSS3 is consistent with browser behavior up to 17 years back, so this is something you can totally rely on.
I've been recently learning about Responsive Design more in detail.
I have used Bootstrap and continue to use it but I came to a point that I'm wondering Pros/Cons and effect on HTML cleanliness and readability (and whether it impacts performance)
Here is what I came to question but haven't found an answer.
With bootstrap, it seems that I need to declare the same section of HTML multiple times, so that I can apply the respective StyleSheets for the media screen size.
<section class="col-md-8">... more html ...</section>
<section class="col-sm-8">... same HTML above or slightly modified ...</section>
<section class="col-xs-12">... similar idea to sm-8 ... </section>
Whereas with straight Media Queries I could have
<section class="my-section> ... some html ... </section>
And then the media queries
#media screen and (max-width: 825px)
section.my-section { ...adjustment... }
#media screen and (max-width: 760px)
section.my-section { ...adjustment... }
#media screen and (max-width: 625px)
section.my-section { ...adjustment... }
These media screen could be separated into respective separate files to keep the code cleaner and more self-contained
So, Given that writing our own media queries require more time and effort, in your experience, what is a better choice, or under which circumstances? (say, small projects vs very large projects with multiple people working on it)
Or are there better practices for Bootstrap that make it better to avoid this HTML duplicated/triplicated/etc html code.
Does the HTML code duplication have an impact on performance, considering that sometimes very large data can be presented. (say using a framework like Angular to iterate and render a list of elements, and thus will have to create the elements for each of the media screen sections declared using bootstrap)
Thank you for your time.
With bootstrap you call all the classes on the same element to give it responsiveness, not create separate divs for each:
<section class="col-md-8 col-sm-8 col-xs-12">
YOUR CONTENT HERE
</section>
Try not to duplicate your html content, though sometimes you just have to when there's no other way.
Is there a CSS selector for the size of the browser. So I can style elements if the browser is greater than 500px for instances.
My target browser is IE9 & IE10 in standards mode only; so I am only concerned about these two browsers.
Sure, you can use media queries, like so:
#media screen and (min-width: 500px) { your css goes here }
can't you just use css media queries for this?
There isn't a selector in CSS for judging the size of one's screen. But I also wouldn't go the Javascript route if you don't have to. Perhaps you should look more into CSS media queries.
CSS 3 enhances support for media-dependent style sheets by letting
style sheets be more precisely labeled. A media query consists of a
media type and at least one expression that limits the style sheets'
scope by using media features, such as width, height, and color.
Media queries let the presentation of content be tailored to a
specific range of output devices without having to change the content
itself.
References:
https://developer.mozilla.org/en/CSS/Media_queries/
http://www.w3.org/TR/css3-mediaqueries/
http://css-tricks.com/css-media-queries/
I have a CSS style sheet utilising Media Queries. My homepage is just a background image 100% x 100% on to which I want to position a centered iframe, which will have a source based on the media query result.
EG:
CSS
#media all and (max-width: 500px) and (min-width: 400px), (min-width: 1151px)
.frame1{
position:absolute;
width:390px;
left:50%;
margin-left:-195px;
}
HTML
<iframe class="frame1"></iframe>
So the width range is 400px to 500px and for any screen in this range the content will be in a centered iframe, with wider screen having a greater margin of background image visible. Now where my problem lays is I want the iframe source to change depending on screen size so I could have the source as mobile.htm (showing a very basic version of website) on small screens, standard.htm (a mid grade version) on average screens and large.htm (additional content included) on large screens.
However I can't get anything I have thought to do this. I assume to be determined by the media query it must be an attribute of the iframe listed in the CSS? I have tried every combination of:
frame src: __.htm;
iframe src: _.htm;
frame src: url(___.htm);
iframe src: url(___.htm);
frame src: url ("__.htm");
etc.
*The underscores being the page name.
But so far nothing works.
Does anyone know if this is possible? If so how? And please be gentle with explanations I am very new to this, trying to self-teach as I go along and learning bits and pieces as I need them to achieve what I want... been going well so far, but has had me stumped for days now!
You can match based on attribute but you can't set attributes using CSS only1
However, you could use a small snippet of JavaScript to detect the result of your media query (albeit indirectly):
use the media query to apply a property value to the IFRAME
select element(s) with that property value using JavaScript (jQuery selectors will work for this, although some iteration may be involved)
update src accordingly
However, there really isn't a direct correlation between media queries and JavaScript. From an article on pairing media queries with JS:
As far as I know there is no direct access to media queries from
JavaScript. You can’t read out whether the example media query above
has fired or not.
The Full Article suggests some script-based workarounds to return results from script which are consistent with the results of the media query.
1 - At least not in a standards-based fashion which is widely supported. There are hacks to execute code inside CSS using IE proprietary expressions (all of which are now deprecated).