On the page there are links displayed with CSS as buttons:
HTML:
<a class="button" href="#">Button</a>
CSS:
a.button {
display: block;
position: relative;
width: 50px;
height: 50px;
background-color: $00f;
}
a.button:hover {
background-color: $f00;
}
I have some main concerns:
The href value is encrypted, thus will appear messy and ugly when the address shows in the browser when the user hovers over the link:
http://mysite.com/shjfgkh53hhsfd9ah390503hh35323j5hj35909ufudufdjj3
Also the href value will become significantly longer because I can't transfer POST parameters (everything's done by GET).
I could however, use this:
HTML:
<input type="button" class="button" href="#" />
And then set the bg in CSS. I'm just not sure whether using pseudo classes like :hover is correct and standards compliant here. I personally thought :hover, :active, :visited etc were meant for links (i.e. a tags).
Clarifying this would really help me out a lot. Thanks!
They may not work correctly IE6, but all current browsers support this, and the spec doesn't forbid it: See here for the spec.
What matters is what's supported by browsers. Honestly, if they're using IE6 and something doesn't work...in this case it's not a breaking lack of functionality, your site works just fine even without. I'd say you're perfectly in the clear here.
Related
Please consider the following HTML markup:
<label class="required" for="email-address">
Email Address
<span class="audible">Required</span>
</label>
<input type="text" id="email-address" placeholder="Company#address.com">
Along with that I have the following CSS:
.required:after {
color: red
content: "*";
/* ... */
}
When I focus the field a screen reader will read out: Email Address required "star". I'd like to use CSS only to display a visual *, but I don't want that read by screen readers. Is this possible?
Or is this scenario common enough that screen readers and users would ignore the star or adjust the settings. I.e., is this not a real problem?
Try this, it targets screen readers with a media query and hides the star
#media reader, speech, aural {
.required:after {
display: none;
visibility: hidden;
}
}
Update:
As the support for my initial solution doesn't seem to be that good I have thought of a alternative. It occurred to me that the only way to ensure that its not read by a screen reader (w/o extra markup) would be to have no asterisk at all! However you could add a image with css to look like a asterisk like so:
.required:after {
content:'';
display: inline-block;
width: .5em;
height: .5em;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b5/Asterisk.svg);
background-size: .5em .5em;
vertical-align: top;
margin-left: .15em;
margin-top: .1em;
}
http://jsfiddle.net/3a1dvdag/
Gonna throw this out here as there's no final answer highlighted and it's a much discussed topic.
The above solution given by #Sam will be in the near future the best option to go for. No browsers thus far that have the #media aural, speech media query so, if you provide it, it will only work in the near future.
Is there any other way to hide pseudo elements from screen readers?
Yes, with limits. You can use the "private use Unicode character set".
Because the characters are private use, screen readers cannot pronounce them and therefore ignore the character.
If that's not an option try to stick to <span> or <i> elements with aria-hidden="true" on them. It's not as clean as pseudo elements, but at least you have full control of the content.
<button type="button">
<span class="i i-arrow-down" aria-hidden="true">Label
</button>
There's this syntax where one can set the alt text for pseudo elements using slash as delimiter. We can leave it blank to indicate the element should be ignored (the same way it is usually done with img tags), like this:
.required:after {
color: red
content: "*" / "";
......
}
This source indicates there was an 'okay' browser support on 2020. I've tested in Chrome with VoiceOver on MacOS and it works now (as opposed to what the table indicates), so hopefully support may already be very good by now.
https://a11ysupport.io/tests/tech__css__css_generated_content_alt
Right now I think there only exists either workarounds like using a combination of HTML elements and aria-hidden, or limited support from browsers that implement the CSS3 speech module.
Note that this module is still at Candidate Recommandation level, but should provide a more accurate control on what should be read aloud or not.
If browser support was perfect, a good answer would be:
Use CSS3 speech module.
But yeah, this is the Web, and browser support isn't perfect, so I'd recommend using some combination of span with aria-hidden="true" even 4 years after this question was asked.
But one should know that although the aria-hidden property indeed prevents the element content from being read, it also hides its presence to the user. The difference is subtle, but the speak property will not hide the element presence by mentioning it when saying how many children belong to an element.
For instance, let's consider this code:
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>What a beautiful day!</title>
<style type="text/css">
body {
counter-reset: headers;
}
h2::before {
counter-increment: headers;
content: counter(headers, upper-roman);
speak: none;
}
</style>
</head>
<body>
<h2>Early morning</h2>
<h2>Lunch</h2>
<h2>Before dinner</h2>
</body>
</html>
And this is what Voice Over reads for the Lunch element, on a supporting web browser (Firefox 59 here):
It counts the speak: none; element in (pseudo-elements count for one), but doesn't read it alound.
Using aria-hidden leads the element not to be counted at all.
I haven't tried other screen readers, and your mileage may vary.
If you use a separate span for your icon you could apply an aria hidden tag to prevent screenreaders from reading it. I'm not sure what the support is for this though.
<label class="required" for="email-address">Email Address
<span class="icon" aria-hidden="true"></span>
<span class="audible">Required</span> </label>
<input type="text" id="email-address" placeholder="Company#address.com">
More info in the W3C spec
Today I found out something weird regarding the way CSS works.
Basically I tried to apply some styles to head, title and script.
I was buffled to find out that this thing worked, so I'm obviously trying to find out why would such a thing be possible.
I got some code going on: here.
I even tried this thing on a local project and it behaves the same, so it's not something related to plunker.
Any clues?
HTML Markup:
<head>
<title>Am I styled?</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script>console.log("Stylish!");</script>
</head>
CSS:
title {
color: red;
display: block;
font-size: 30px;
}
head {
display: block;
border: 3px solid black;
}
script {
display: block;
color: green;
}
It is possible because there is no good reason for it to be impossible.
To make it impossible there would have to be special casing to treat the elements differently. That means more work and more complexity (and thus more opportunity for bugs) both in the browsers that handle HTML and CSS and in the HTML and CSS specifications.
It is possible because browsers have been developed to process HTML elements more uniformly. For example, the “unusual styling” does not work on IE 8 and older. In modern browsers, rendering is more systematically based on CSS concepts; all elements have all CSS properties, and the value of the display property controls the overall way of rendering the element. For head and possibly for its children, the default is display: none. As you’ve seen, this can be overridden.
Marginally, the motivation behind this may also have included the idea that authors could make some use of styling elements that are normally invisible. For example, a page that discusses CSS might wish to show its own style settings, as set in a style element, simply by making that element visible and suitably formatted, e.g.style { display: block; white-space: pre }`.
I'm designing a html page with strict doctype and there's a form element in my page.
What I want to do is to change background-color of inputbox when mouse touches my form. I've done this with css :hover selector on form tag, but problem is that IE only understands hover on "a" tag!
I've googled my problem and what I found is to:
using an htc file;
using javascript to create a hover class on elements;
creating a big "a" tag and put all elements inside it;
but I don't want to do any of these solutions!
Isn't there any better way to fix this problem in IE?
My HTML Code:
<form id="footer-search-form" title="Search" action="#action">
<fieldset>
<input type="text" class="footer-search-input" id="q" name="Search"></input>
<input type="button" class="footer-search-button" title="Search" value="Search"></input>
</fieldset>
</form>
My CSS Code:
#footer-search-form:hover .footer-search-button { background-color: #fff; }
#footer-search-form:hover .footer-search-input { background-color: #fff; }
Update: and after hours of searching I did it by using js:
onmouseover="this.setAttribute(document.all?'className':'class','footer-search-hovered');" onmouseout="this.removeAttribute(document.all?'className':'class','footer-search-hovered');"
and
.footer-search-hovered .footer-search-input, .footer-search-hovered .footer-search-button { background-color: #fff !important; } /* For IE6 compatibility */
I hate it, but it seems that there's no better way...
You're really only going to run into trouble if your users are using IE6. The majority of web developers nowadays don't even bother providing support for such an old browser, so I wouldn't worry about it.
IE has supported :hover on any element since IE8 (or even IE7? I don't remember), which has been released for over three years. Admittedly far too many people still use IE6 (mostly because IE doesn't have an auto-updater - it really needs one), but for something as simple as this aesthetic effect you really don't need to worry about support in old relics.
So i have some html:
<a class='clicktext'>...read more!</a>
and i want to give it a :hover animation, as so:
.clicktext{
}
.clicktext:hover{
text-decoration:underline;
}
.clicktext:active{
text-decoration:none;
}
Suffice to say, it does not work in Mozilla Firefox 5, even though it works perfectly well in Chrome and Safari. However, if i change it to
a{
}
a:hover{
text-decoration:underline;
}
a:active{
text-decoration:none;
}
It works perfectly fine in Mozilla Firefox 5! I have not managed to find anything regarding this online.
I could, of course, just change my styles to apply to the a rather than the .clicktext. The problem with that is that it would screw up my conventions, which is (as far as possible) apply all the styles to classes rather than to the tag names. After all, I have many other tags for which i do not want this underline-on-hover thing to appear.
Has anyone bumped into this, and perhaps found a nice solution?
edit: these also do not work
.clicktext a:hover{...}
a .clicktext:hover{...}
I had these kind of problems with Firefox and solved it by adding the tag name to class name:
for example I had this which worked in Chrome but not in Firefox:
.content .sidebar:hover{
background-color: red;
}
and fixed it by making it more specific like this:
div.content div.sidebar:hover{
background-color: red;
}
http://jsfiddle.net/rE8xU/
I do not see the issue, when moused over it does include an underline.
A possible cause of this issue is the level of importance that the class has.
Such as styles that are set by their identification tag will take over any class styles and so forth.
http://htmlhelp.com/reference/css/structure.html
check out cascading order
Lastly, make sure that the css file is properly linked and or embedded
you can use firefox to check as well.
You need to add href="#" to your . the :hover meta tag needs the link to have the href property set.
use <p></p> tag if you are not hyperlinking the text.
<p class='clicktext'>...read more!</p>
then for styling the text.
p.clicktext {
color: #ccc;
}
p.clicktext:hover {
text-decoration:underline;
}
Hope i Helped ;)
There's a big chance that you have a conflict somewhere in your CSS, because the jsfiddle with this exact code works fine in Firefox 5. You might want to check for ID-selectors with the hover-pseudoclass that could possibly overrule this line of styling. Inspect it with firebug to see what css is inherited.
You might be getting this problem for
1: not specifying the class which is clicktext in your case, or.
2: object a is associated with some other class not compatible with clicktext class!
I am saying this because my website
is running perfectly without any problem, in both Chrome and Firefox!
I am using hover to produce an overlay effect! This is what I am doing:
.container{
//your specifications
}
.image{
//your specifications
}
.text{
//your specifications
}
.container:hover .text{
//your specifications
}
I also think that the answer marked as "correct answer" is not correct.
I had same problem, was just not working on Firefox, quick close and restart app and was working again.
Daniel
I have an Html.ActionLink on my page and I am using the following CSS on it to give it an image and try and remove the underlining.....
a.searchButton
{
background-image: url(/content/images/DropAcross.png);
background-repeat: no-repeat;
height: 16px;
width: 16px;
display: block;
text-decoration: none;
clear:none;
}
Can anyone see a problem with this? All the CSS properties seem to work apart from the text-decoration: none, which seems to leave the underline in place.
You would have to look at the rendered html. In Firefox or Google Chrome, right click and choose Inspect Element.
You might find something silly like the searchButton class is being applied to a span that wraps the a tag, in which case, you would get everything working except the link specific rule:
text-decoration:none;
I know that it is old topic, but maybe somebody will considere it helpful -
"text-decoration" attribute, mentioned above, can be passed to ActionLink by construction like this:
#Html.ActionLink("Display_Name","Action_Name",null,new {style="text-decoration:none;"})
Setting text-decoration:none; ought to work.
Is it possible that there are some other styles overriding it? Have you looked in Firebug (or similar tools) to see what styles are being applied?
One possible answer may be the :hover, :visited and :active pseudo classes. If they are set to have an underline, then they will override the default style for the element.