hide a pseudo-element from a screenreader? - css

I am using :before pseudo-elements bound to particular classes to add symbols in front of p tags, with CSS like this:
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: '*';
}
I am using this in a Wordpress theme where the user can select that class for a p tag in the editor, in order to to put that symbol to the left of the current paragraph.
However, the website should be accessible, and the screenreader (at least NVDA, with which I am testing this) is reading that pseudo element and the included symbol, which I don't want. But since this element is not in the HTML code, I cannot add aria-hidden = 'true' to hide it from screenreaders.
Any idea what i could do to get the screenreader to ignore those pseudo-elements?

Know this is old, but recently had to answer this too and eventually found a better answer to this question
pseudo-elements; alternative text can be indicated after a /:
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: "*";
content: "*" / "";
}
In this case the blank alt text will cause this content to be ignored.
Note not all browsers support this syntax (basically just Chromium based browsers at this time of writing) so make sure you add a fallback first that works for all browsers and is only overridden by those that support this new syntax as well. Otherwise, without this fallback, browsers like Safari just ignore the unrecognised CSS line and fail to display anything when you use an / for alt text!

You can try using the speak property:
CSS:
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: '*';
speak: none;
}

Pseudo-element inheritates from the main class their visibility for screen and screenreaders.
For instance, the following code will hide everything including the *
p:before {content:'*'}
p {display:none}
If you want the content of the pseudo element not to be read, you have to use an unprounounceable replacement like an UTF-8 equivalent :
td > p.markerclass1:before {
position: absolute;
left: -1rem;
content: "\2022";
}
EDIT: \2022 announces "bullet" with NVDA while another code like \2023 for instance announces nothing

The scenario was "Send Mail" link associated with "Click Here To" text, but Screen Reader reads the whole text, but i want it to read only "Send mail".
Here i have solved that issue using "aria-label" attribute.
a
{
text-decoration:none;
}
a::before
{
content:"Click here to - ";
color:Black;
font-weight:bold;
}
Send Mail
Hope this will work for you guys.

Related

Is there a way to "clear" a CSS property as if never existed?

I am using a CDN css file which sets a "top" property for an item which was recently added as a new release. This 'top' property completely throws off the height of a list item in my code. I am certain this is the culprit by use of Firebug.
Normally, I am able to override previously directed CSS properties (such as height, color, etc) but is there a way to essentially say "forget that I told you to set top: 24px, I want you to ignore that".
In essence:
.some-class > a:after {
....
top: 24px;
}
(in another file)
.some-class > a:after {
top: gothehellaway
}
Note: I have tried setting to 0, auto, and inherit without successful results.
Update 1:
I have tried using the recommended inherit but it does not work in any tested browser. I have also used top: auto !important and top: inherit !important without luck.
Update 2:
Just noticed in the CDN CSS file, there are actually two calls for the exact same property (although no idea why Zurb did it this way. Damn you Foundation 4):
.top-bar-section .has-dropdown > a:after {
...
top: 50%;
}
.top-bar-section .has-dropdown > a:after {
...
top: 22.5px;
}
The initial keyword represents the browser’s default value for a property.
.some-class > a:after {
top: initial;
}
initial has long been supported in Firefox, Chrome, and Safari, but is not supported in Internet Explorer.
Use initial to set it
for example
.some-class > a:after { top:initial; }
HTH

How can I style specific symbols in an element?

Is it possible to have the quotes in the following HTML bold and red, without altering the HTML code?
<div class="client_message">“ Ankit ”</div>
Basically I would like to have some CSS that results in the same effect as
"Ankit" but these quotes must be in bold.
Is this possible with CSS only?
You can't. CSS has very limited capability when it comes to selecting things which are not elements.
The nearest CSS has is ::first-letter, but that would select “ A.
If you can use JavaScript you could change the HTML to
<div><q>Ankit</q></div>
(mentioned in comment before)
Now selecting the elements is easy
q {
color: red;
font-weight: bold;
}
.client_message:before {color: red;font-weight: bold;content: "“";}
.client_message:after {color: red;font-weight: bold;content: "”";}
div.client_message:before {
position: absolute;
z-index: 2;
overflow: visible;
left: .0em;
color: red;
background-color: white;
font-weight: bold;
content: "“";
}
div.client_message:after {
position: absolute;
z-index: 2;
overflow: visible;
right: .0em;
color: red;
background-color: white;
font-weight: bold;
content: "”";
}
div.client_message {
position: relative;
display: inline;
z-index: -1;
}
css has a content property and a :before and :after selector class, you can use these to insert and style the quotes.
note CSS content property is not supported is old IE's less than version 9 http://caniuse.com/css-gencontent
EDIT You have to do a bit of fudging in the CSS but you can get it to work http://jsfiddle.net/wtceu/
EDIT 2 I've put a background-color so that the tails from the HTML entity quotes don't show through the new overlapped quotes. The only issue is if the text takes up more than one line, the ending quote won't position correctly (you can reproduce this by shrinking the width of the jsfiddle window).
Quotes require ‘possessive’ punctuation. In “[Css The Definitive Guide 4][1]”, pp. 786-788, Eric Meyer describes ‘Generated quotes’.
With quotes, you can define quotation patterns to as many nesting levels as you like. In English, for example, a common practice is to start out with a double quotation mark, and a quotation nested inside the first one gets single quotation marks. This can be recreated with “curly” quotation marks using the following rules:
quotation { color: forestgreen; display: block; }
quote { display: block; quotes: '\201C' '\201D' '\2018' '\2019'; }
quote::before, q::before { content: open-quote; }
quote::after, q::after { content: close-quote; }
<quotation>
<quote>
In the beginning, there was nothing.
And God said:
<q>
Let there be light!
</q>
And <abbr>there’s</abbr> some light, that’s [Mac keyb] good.
</quote>
The Holy Bible, Creation
</quotation>
“In the beginning, there was nothing. And God said: ‘Let there be light!’ And there was light.”
The hypotheses (nor acronyms) used in English abbreviation contractions do not respond to Meyer's simple quotation CSS. That's where ’ and ” are useful, working with the quotation, [abbr and acronnym][2] elements. Note that ABBR element (e.g., WHO) is distinct from the abbr attribute (it's one, he's done).
Note also that Apple device keyboards use Option and Shift-Option keys pressed-together with [ and ] keys to generate English opening and closing curly quotes respectively, in this and many other web environments. Meyer's CSS and simpler Apple keyboard shortcuts work well for ‹other languages›, such as French quotation punctuations.
Other devices and networks may similarly adapt or even block the simple display of HTML and CSS quotation code (and related punctuation). There's nothing wrong with offering HTML/CSS guidance, where appropriate. Curly quote styling can encompass more than simple quotes.
[1]: https://itebooksfree.com/book/css-the-definitive-guide-4th-edition/31410. Meyer and Weyl ©2018.
[2]: https://maxdesign.com.au/news/abbreviations/ ...no discussion of block elements that are a foundation of written language quotations. Contraction and quotation, CSS technology character string focus tends to ignore mainstream curly quotes development. Meyer being an important exception.
Clearly we can accomplish far more than most are aware of, without almost scripted neglect in our collective knowledge base. As an aside, it would be nice if Stack quotation marks were more legible.
Moving forward, perhaps to cover our bases better, the CSS should look like this.
quotation { color: forestgreen; display: block; }
quote { display: block; quotes: '\201C' '\201D' '\2018' '\2019'; }
quote::before, q::before { content: open-quote; }
quote::after, q::after { content: close-quote; }
quote { quotes: '\201C' '\201D'; }
blockquote { quotes: '"' '"' "'" "'" '"' '"'; }
blockquote p::before { content: open-quote; }
blockquote p::after { content: no-close-quote; }
Google finds many people unable to style the simple quotes. Still looking for contraction code: i.e., root’extension possessive single right curly quote styling. Can current DOM handle contraction single right quote without script... what's that trick?

How do I override CSS set on a pseudo element?

I know that has been asked before, but I find no clean way of overriding this CSS:
.ui-input-search:after {
content: "";
height: 18px;
left: 0.3125em;
margin-top: -9px;
opacity: 0.5;
position: absolute;
top: 50%;
width: 18px;
}
I need to leave ui-input-search on the element, but can add my own class, like:
.ui-input-search-no-pseudo:after {
content: "";
}
Question:
Is there an easy way to remove "pseudo-css" without having to overwrite the CSS line by line?
Thanks!
As far as I can tell there is no other way than to override all properties. The styles are defined on the element, they won't just disappear because of another selector that targets the element.
If you only want to remove the pseudo element from the page you can do content: none.
Added from comments below:
The difference between content: "" and content: none is that content: "" produces a pseudo-element with no content (i.e. an empty pseudo-element), whereas content: none prevents the pseudo-element from being generated at all.
Here content: ""; doesn't affect at all if you want to remove that pseudo you have to use content:none; it will remove previously added pseudo content.
content:none;
If that doesn't help you can also try :
display:none;
if still, it doesn't work then you could try the below, but I never suggest you use !important
display:none !important;
here is working jsfiddle
https://jsfiddle.net/ganeshswami99/52duu0x8/1/

Browser Support for CSS Page Numbers

So I am aware of this option: Page numbers with CSS/HTML.
It seems by far to be the best way to add page numbers to a print version of a page, but I can't get any variation of this to work anywhere. I have tried on my Windows 7 machine in Chrome, Firefox, and IE9. Based on some of the links it looks like this may be supported in more proprietary software like Prince XML. Is this supported by web browsers for print versions?
I have tried making just a blank html file and in the head adding this between two style tags:
#page {
#bottom-right {
content: counter(page) " of " counter(pages);
}
}
I have also simplified it even to just use content: "TEXT"; to see if I can get something to show up. Is this supported anywhere? By 'this' I'm specifically meaning the #page and #bottom-right tags, since I have gotten content to work many times.
I've been trying to implement paged media as well and have found, according to this Wikipedia page, that there's no browser support for margin boxes as yet. No wonder it wouldn't work!
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
See the table, Grammar and Rules, margin boxes section. Margin boxes are what's needed for page numbering as well as running headers and footers. Getting this implemented would save me the overhead of having to convert the printed media to PDF.
Not using #page, but I have gotten pure CSS page numbers to work in Firefox 20:
http://jsfiddle.net/okohll/QnFKZ/
To print, right click in the results frame (bottom right) and select
This Frame -> Print Frame...
The CSS is
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
and the HTML is
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
This does not seem to work anymore. Appears it only worked for a short time and browser support was removed!
Counters have to be reset before they can be used, according to https://developer.mozilla.org/en-US/docs/CSS/Counters.
You can set your starting number to whatever, the default is 0.
Example:
#page {
counter-increment: page;
counter-reset: page 1;
#top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
... in theory. In real world only PrinceXML supports this.
Via Mozilla, (Printing a document)
This puts a header and footer on each printed page. This works well in Mozilla, but not quite so well in IE and Chrome.
<!DOCTYPE html>
<html>
<head>
<title>Print sample</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<h1>Section A</h1>
<p>This is the first section...</p>
<h1>Section B</h1>
<p>This is the second section...</p>
<div id="print-head">
Heading for paged media
</div>
<div id="print-foot">
Page:
</div>
</body>
</html>
The CSS:
/*** Print sample ***/
/* defaults for screen */
#print-head,
#print-foot {
display: none;
}
/* print only */
#media print {
h1 {
page-break-before: always;
padding-top: 2em;
}
h1:first-child {
page-break-before: avoid;
counter-reset: page;
}
#print-head {
display: block;
position: fixed;
top: 0pt;
left:0pt;
right: 0pt;
font-size: 200%;
text-align: center;
}
#print-foot {
display: block;
position: fixed;
bottom: 0pt;
right: 0pt;
font-size: 200%;
}
#print-foot:after {
content: counter(page);
counter-increment: page;
}
If you are looking to add page numbers when printing under Chrome/Chromium, one easy solution is to use Paged.js.
This JS library takes your HTML/CSS and cuts it into pages, ready to print as a book, that you will preview in your browser. It makes the #page and most the CSS3 specifications work for Chrome.
Solution 1 (easy) if you are OK with cutting your view into pages, ready to print
Just add their CDN in the head tag of your page :
<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">
You can then add page numbers by using the automated counter page. Example :
HTML to put anywhere you want to display the current page number:
<div class="page-number"></div>
CSS to make the number appear in the div :
.page-number{
content: counter(page)
}
The library also allows to easily manage page margins, footers, headers, etc.
Solution 2 (trickier) if you want to show numbers (and page breaks) only when printing
In this case, you need to apply the Paged.js CDN only when printing the document.
One way I can think of would be to add a print me button that fires Javascript to :
add the CDN to the page
and then execute window.print(); to launch the printing prompt of the navigator

Limit :hover to the parent element

Here come my example (found some pretty photos on the internet for you): http://jsfiddle.net/xGPys/ (works on chrome only, if anyone finds why Firefox doesn't like it)
So the part that causes me trouble is there:
.imagepreview:hover a {
top: -61px;
height: 150px;
z-index: 1000;
}
What I want to achieve is: You should be able to pass you mouse on the whole column, and each image should open and close one after the other, right now, the opened photo covers the other ones, and so the :hover state is note removed from the <td>.
I could use a bit of Javascript but I'd prefer keeping it pure CSS.
Thanks !
Just set the pointer-events to none:
.imagepreview a {
/* ... other styles ... */
pointer-events: none;
}
.imagepreview:hover a {
top: -61px;
height: 150px;
z-index: 1000;
}
Here's your fiddle: http://jsfiddle.net/xGPys/1/
Warning: pointer-events is experimental. Use at your own discretion.

Resources