-ms-high-contrast-adjust equivalent in IE9 - javascript

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.

Related

Hide certain elements if user is using mobile phone, provide button to make elements reappear

Summary: I am attempting to design a restaurant menu. When viewing the site on a desktop the user should see the entire menu i.e a category ('Appetizers') and all of the food entries in said category('Fried Calamari', 'Mozzarella Sticks', etc). However, when viewed on a mobile device I would like the entries to be hidden and the food categories to be buttons. When the 'Appetizer' button is clicked, the user should then see 'Fried Calamari', 'Mozzarella Sticks', etc. I feel like I am going about implementing this in a convoluted way. My code:
index.html:
<div class="food-section-heading" id="appetizers">Appetizers</div>
<div class="menu-item">
Fried Calamari
</div>
<div class="menu-item">
Mozzarella Sticks
</div>
using javascript to hide what's normally there and present the button:
/* Function definitions */
function hideElements(className){
elements = document.getElementsByClassName(className);
for(i = 0; i < elements.length; i++){
elements[i].style.display = 'none';
}}
function showElements(className, displayType){
elements = document.getElementsByClassName(className);
for(i = 0; i < elements.length; i++){
elements[i].style.display = displayType;
}}
/* Main Program */
//if iPhone X or smaller hide '.menu-item' elements
if(window.screen.availWidth <= 375){
hideElements('food-section-heading')
hideElements('menu-item');
}
/* Code to create button and show elements upon click event not included. I stopped writing it and came here because I feel I can't be doing this right*/
Is there any easier way to go about this? (A good example of what I am talking about is grubhub.com on mobile vs what grubhub.com presents on Desktop.)
There are many ways to go about displaying the same document differently on different devices.
When targeting desktop / laptop / tablet / mobile a usual starting point would be to choose whether you want to detect:
the browser viewport size / viewport orientation / device screen size; or
browser make and version; or
data related to the browser's touch capability
Then, you can use:
CSS #media queries (commonly used in Responsive Design)
Client side browser sniffing (via javascript)
Server-side browser sniffing (used in RESS / Responsive with Server Side)
Touch detection (again, via javascript)
and more.
Targeting via CSS #media queries for screen size
One of the more easily-implemented approaches is to deploy one or several CSS #media queries.
Here is a simple #media query targeting screen sizes which are 800px wide or narrower:
#media only screen and (max-width: 800px) {
.menu-item {
display: none;
}
}
Adding in #media query hover: hover | none
If you want more sophisticated targeting (e.g. in a situation where you don't want to target narrow browser windows on a desktop / laptop) you can target the screen size (as above) in combination with checking if the screen supports a hovering action (on the basis that if it doesn't it's very likely a touchscreen):
#media only screen and (max-width: 800px) and (hover: none) {
.menu-item {
display: none;
}
}
Older approach using device-size #media queries (not recommended)
Before the #media query hover: hover | none arrived, if you wanted more sophisticated targeting, you could target actual device sizes with a #media query:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px),
only screen and (min-device-width: 320px) and (max-device-width: 568px),
only screen and (min-device-width: 360px) and (max-device-width: 598px) {
.menu-item {
display: none;
}
}
But in practice this tends to be less useful and harder to maintain.
I think you might find some useful information in this thread.
Writing for mobile is very different from writing for desktop. It would likely be best if you used a router to direct users to one page if they are on mobile, and the one you've already created if they are on desktop.

Use hover/active CSS by default on mobile devices

On desktop devices, I have designed my elements to be grayed out by default, but become colored when a user hovers over them. On mobile devices, I want them to use the hover state CSS to be colored in by default. Is it possible to do this through JavaScript?
I have lots of elements with different colors, so it would be much easier to simply trigger the state through JavaScript rather than writing new classes and adding them to the elements.
No need for JS! You can use media queries in CSS to accomplish this.
Note: I'm using Bootstrap 4's numbers for screen sizes in this example:
.element:hover {
background-color: gray
}
#media only screen and (max-width: 767px) {
.element {
background-color: gray;
}
}
Bootstrap starts medium screen sizes at 768px, hence my max width of 767. If you want, you can try it out at https://jsfiddle.net/21haxstd/

Is there a proper way to make responsive text?

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.

"Show full site" button to bypass css media queries

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.

Question on webkit-min-device-pixel-ratio

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/

Categories