Which all browsers will understand or rather apply CSS rules for the following statement;
#media screen and (-webkit-min-device-pixel-ratio:0) {
//CSS Styles
}
Also what will be the difference if "only screen" is used above insted of screen i.e.
#media only screen and (-webkit-min-device-pixel-ratio:0) {
//CSS Styles
}
The rule will be applied for all webkit-based browsers. You can see a list here http://en.wikipedia.org/wiki/List_of_web_browsers#WebKit-based_browsers (most important chrome and safari).
About the word only W3 says:
The keyword ‘only’ can also be used to
hide style sheets from older user
agents. User agents must process media
queries starting with ‘only’ as if the
‘only’ keyword was not present.
Source: http://www.w3.org/TR/css3-mediaqueries/
Related
I need javascript #help.
I have an object(#objID) with three different data state (A B & C) (https://www.dropbox.com/s/zn19k87eu2hp8ow/data-states.jpg?dl=0)... Each state contain some css to describe the look of it..
I want to use javascript to detect media queries change and add the appropriate data state to #objID.
(ie.
if screen is under 320px then add [data-state="A"] to #objID
or if screen is between 320px and 728px then switch to [data-state="B"]
or if screen is above 1024px then switch to [data-state="C"]
)
similar to this concept..http://zerosixthree.se/detecting-media-queries-with-javascript/
but im not sure how to implement it.
Please help. Thanks
To simplify you can do something like this:
window.matchMedia("(max-width: 320px)").addListener(function() {
// Change the value of `data-state`
});
window.matchMedia("(min-width: 321px) and (max-width: 728px)").addListener(function() {
// Change the value of `data-state`
});
However you need make sure the browser supports window.matchMedia and also handles maintaining state etc to know when you've crossed from one breakpoint and into the other and identify which is active as both will trigger as you exit and enter breakpoints.
As for doing it on window.onresize this is not a very performant way to do this and you must throttle/debounce if you do it that way. Using matchMedia will only trigger when the breakpoint changes rather than continuously on resize. It also give you the benefit of keeping your CSS media breakpoints in sync with your JS.
This is a Polyfill for browsers which do not support it as mentioned and this guide might also help you.
However:
I have an object(#objID) with three different data state (A B & C).
Each state contain some css to describe the look of it..
Sounds as though you want to change the CSS styles applied to an element based on the data-state attribute, which you are going to change per breakpoint?
Correct me if I am wrong but why can't you just use media queries to change the CSS that is applied to it instead?
#media only screen and (max-width: 320px) {
/* State A */
.css-selector {
color: red;
}
}
#media only screen and (min-width: 321px) and (max-width: 728px) {
/* State B */
.css-selector {
color: green;
}
}
#media only screen and (min-width: 728px) {
/* State C */
.css-selector {
color: blue;
}
}
You need the onresize event
window.onresize = function(event) {
//...
};
The screen has two dimensions, width and height, and you describe a one-dimensional comparison, which does not give us enough information about what you want to achieve. Anyway, you can use window.innerWidth and window.innerHeight inside your onresize event.
I've oftentimes had designers give me responsive designs where the wording of an element changes based on the size of the screen.
Desktop: Read more
Mobile: Read
Desktop: Download PDF
Mobile: Export
Desktop: Click here
Mobile: Tap here
What is the correct way to have different text in mobile and desktop versions of a website?
You could use media queries, pseudo classes and some ingenuity for this:
a[data-mobiletext] {
background-color: #FC0;
}
#media screen and (max-width: 700px) {
a[data-mobiletext] {
background-color: #CF0;
}
a[data-mobiletext] span {
display: none;
}
a[data-mobiletext]:after {
content: attr(data-mobiletext);
}
}
<span>Read more</span>
<span>Download PDF</span>
<span>Click here</span>
Click "Full Page" to view Desktop version.
There are a couple of approaches I've used where clients have made similar requests (and not been talked out of it*):
1) Use Javascript to change the text based on screen width / device detection methods;
2) Set the default text as your preferred choice, and wrap it in a span or similar, use the text that you think is best on all devices (best for SEO / content / screen readers depending on priority) then use pseudo selectors e.g. :before with the content: '' property to set alternative text based on media queries. Hiding the default span/element as appropriate.
(*) I would say consider your content and see if you can find a universal label for these items is probably better practice though.
I'm using css media queries on my website to switch to a more vertical layout on smaller devices. This works quite well, but I'd like to add a button on the site with something like "Show desktop version". I want to make this button (or link, whatever) force or alter the media query evaluations so they evaluate as if the screen width was bigger than it is (e.g. 1200px instead of 320px). Is this possible?
My css looks like this:
#logo {
/* Mobile style */
[...]
#media (min-width: #screen-sm) {
/* Desktop style */
[...]
}
}
#footer {
/* Mobile style */
[...]
#media (min-width: #screen-sm) {
/* Desktop style */
[...]
}
}
/* And so on... i.e. multiple piecewise styles, following the same pattern used in Bootstrap's css */
I found this interesting approach which uses a css class on the body instead of media queries to switch between layouts. However, it completely does away with the actual media queries and uses javascript instead.
"Full web" mobile browsers and screen-size media queries based
edit
Refined the css example. The first 2 answers are very helpful, but I'd rather not have to completely modify the css organization to separate at the root desktop and mobile versions. One more interesting technique:
LESS: Can you group a CSS selector with a media query?
edit 2
An interesting approach is to modify the css media queries via javascript. It scares me a bit though because browser support might be unreliable for an such an obscure technique:
http://jonhiggins.co.uk/words/max-device-width/
There is a bit of redundancy with this method, but a selector has higher specificity its properties have precedence even if a media query matches. For example:
.container, .full-site.container {
/* full site styles */
}
#media (max-width: 395px) {
.container {
/* mobile styles */
}
}
When full site is clicked, add the .full-site class and the full site styles will apply even on devices with a 395 pixel width.
http://jsfiddle.net/7ZW9y/
Two possible implementations comes to mind: 1) segregate your media queries into a separate stylesheet, 2) prepend a specific class to all the selectors inside a media query.
Option 1: Separate stylesheets
Put all of the media queries you are seeking to remove (using the "Show desktop version" button) into a separate stylesheet (e.g., "mobile.css"):
<link rel="stylesheet" type="text/css" href="normal.css" />
<link rel="stylesheet" id="mobileStyle" type="text/css" href="mobile.css" />
You can then remove this element using jQuery (e.g., $('#mobileStyle').remove()). Removing the element referencing the stylesheet will remove all the styles defined in the stylesheet.
Option 2: Prepend a CSS class
Keep everything in a single stylesheet but prepend all media-queried selectors with a single class. For example, you could add a .mobile-ready class to the <body> and then:
#media (min-width: ... AND max-width: ...) {
.mobile-ready header{
}
.mobile-ready footer{
}
.mobile-ready ...{
}
}
With your "Show desktop version" button, remove the .mobile-ready class from your <body>, which will remove all the styles encompassed by the class. Writing CSS in this manner is easy with LESS or Sass.
Try this ... simple, but reasonable solution for sites that are heavily coded.
$('meta[name="viewport"]').prop('content', 'width=870');
Set the width to what you need. I used this in an instance where an existing site is in place and I need to allow mobile to display as normal page, but normal page is centered with content having a width of 865. This minimizes the impact of a full page on a mobile device.
One of our CSS files uses -ms-high-contrast-adjust: none to make sure some background features show up even under high contrast mode. It works fine on IE10 and IE11. Now we're trying to port the same CSS to IE9, and obviously it's not supported.
What's the equivalent of the -ms-high-contrast-*** property under IE9? Is there some other way to trick the browser to not change features with the "high contrast mode" setting?
There ain't an equivalent.
Remarks
The -ms-high-contrast media feature was introduced in Windows 8.
It's for ie10.
You can test it with media-queries like:
#media screen and (-ms-high-contrast: active) {/* ... */}
#media screen and (-ms-high-contrast: black-on-white) { /* */ }
#media screen and (-ms-high-contrast: white-on-black) { /* */ }
http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx
Some developers use it to target IE10 with media queries :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* i-love-ie */
}
PS, this is kind of freaky, you want a browser to force an OS to display in a specific way, or display in a specific way over the OS.
[HOLD ON]
i JUST found this article from Steve Faulkner : http://blog.paciellogroup.com/2010/01/high-contrast-proof-css-sprites/
CSS sprites using the before: pseudo element
An alternative to implementing CSS sprites using the traditonal
background-image method is available and it resolves the issue of
images not being displayed in high contrast mode. This alternative
method makes use of the CSS before: pseudo element (note: the after:
pseudo element could also be used). Example:
Link with a home icon and text with default display colors. Link with
a home icon and text with windows high contrast colors.
CSS
span.test1:before {
margin-right: -10px;
content: url(icons.png);
position:relative;
left:-2px;
top:-109px;
}
span.test1 {width:17px;
height:18px;
display:inline-block;
overflow:hidden;}
HTML
<span class="test1"></span>Home
I have no time to test it. Give it a try and come back to us so i can 'correct' this answer if needed.
I have a simple div that I'm styling for responsive design use on smart phones. I'm also using the Fullscreen API so that that div can be made fullscreen, whether on the desktop or mobile.
The mobile version adjust for the menu bar when not in fullscreen with a margin but there is no need for the margin when the div is fullscreen. My implmentation below doesn't appear to work - the margin gets applied both out of full screen and in full screen.
Edit: As indicated by Lie Ryan's answer below, I was make the parent of myDiv fullscreen and the fullscreen pseudo class is only available to the element that is fullscreen.
.myDiv
{
width: 80%;
}
.myDiv:-webkit-full-screen
{
margin-top: 0;
}
.myDiv:-moz-full-screen
{
margin-top: 0;
}
.myDiv:-ms-full-screen
{
margin-top: 0;
}
.myDiv
{
margin-top: 0;
}
#media screen and (max-width: 480px)
{
.myDiv
{
margin-top: 65px;
}
}
Q: What is the order in which CSS media queries and pseudo classes are applied? How do I style my div so that when the div goes full screen, the margin is removed?
EDIT:
I think I see what your question is now. The full-screen pseudo-selector are applied to the item that you're requesting to full screen not to the myDiv. Compare the three full screens in this jsfiddle (Firefox only), only the first one have the full screen rule applied.
OLD ANSWER:
Q: What is the order in which CSS media queries and pseudo classes are applied? How do I style my div so that when the div goes full screen, the margin is removed?
Rules with the same selector specificity cascades; i.e. later rules overrides earlier rules.
Rules with higher selector specificity overrules rules with lower selector specifity. Selector specificity is a fairly complex topic; but the short version is: #id overrules .class overrules tagname overrules * selector. Also, inline styles (i.e. style= attribute) overrules embedded styles (e.g. <style> tag inside <head>) which overrules external styles (i.e. styles linked using <link>).
Neither media query or fullscreen API changes the cascade or specifity rule.