Use hover/active CSS by default on mobile devices - javascript

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/

Related

Media Queries or JavaScript to hide an element on certain screens

We have a section on the page that needs to be hidden on small phone screens, and appear on larger screens.
The easiest way to do it would be to use CSS media queries.
.section {
display: none;
}
#media (min-width: 900px) {
.section {
display: block;
}
}
However, this would keep the section in the DOM, thus potentially making it less efficient.
Alternatively, we could toggle the existence of the section using a state in our JavaScript framework (React in our case, but not important for the question).
My Question is: When is it better to use one, and when is it fine to use the other?

Setting HTML5 autofocus attribute with CSS

I have a website that has one input field (like a search engine) and I use the HTML5 autofocus attribute on it.
But on very small screen sizes the soft keyboard that pops up on many devices obscures too much of the screen.
Is it possible to se the autofocus attribute in a CSS media query, so its only active on larger displays ?
I know I could set the focus with Javascript, but right now the pages doesn't use any Javascript and I would prefer to avoid it if its possible to use CSS for this.
As suggested above in comments: Use two inputs and make the one hidden (display:none;). Then with a #media rule target screens that have a maximum width of 480px and make the hidden input visible (display:block;) and hide the other one.
CSS:
.smscreen {
display: none;
}
#media screen and (max-width: 480px) {
.lgscreen {
display: none;
}
.smscreen {
display: block;
}
}
See Example using CSS.
Otherwise, you can detect the window size with jQuery on page load, and if the screen is larger than 480px to use .focus() function on the input.
See Example using jQuery.

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.

Bootstrap - Dynamic height sizing on buttons and text fields, for each environment

I'm using Bootstrap 3 to create some HTML responsive forms, and there's one thing I'm trying to do, about layout.
I want to change dynamically the height of buttons and text fields by following these rules:
On desktop devices, use small buttons / text fields
On mobile devices, use large buttons / text fields
I know that I can do it by using these button and text field classes. But, I want to use these classes only if user is accessing the page from a mobile device, not always.
I know, too, that you can show/hide HTML elements by using these classes from Bootstrap Responsive Utilities, but I need to give an id to all buttons / text fields, so I don't know if I can duplicate these elements and wrap each of then inside a div that will be shown on a specific environment, since two elements with the same id is wrong by HTML specifications.
I tried an approach based on that solution, and I simply add/remove these classes based on each state/environment. It's working, but is there an easier approach to this?
To change specific element style by screen size you can use media queries. for example:
<button class="btn dynamic-button">
css:
#media (max-width: #screen-xs-max) {
.dynamic-button {
height: 20px;
}
}
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) {
.dynamic-button {
height: 40px;
}
}

-ms-high-contrast-adjust equivalent in IE9

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.

Categories