I have just discovered that Firefox doesn't support the CSS property 'column-span' yet. Without 'column-span', breaking up column layouts seems unworkable. Is there a workaround to achieve the same result?
column-span is not supported on Firefox yet. However, you might be able to workaround this with your HTML structure.
Let's say you need a column-span:2 headline and the paragraphs should have 2 columns instead.
Like:
<article>
<p>Introduction - this should span everything too</p>
<h2>This should span everything</h2>
<p>this text should be multicolumn</p>
<h2>This should span everything again</h2>
<p>this text should be multicolumn again</p>
</article>
The logic approach is to do something like:
article {
column-count: 2;
}
article > p:nth-child(1) {
column-span: all;
}
article > h2 {
column-span: all;
}
But as mentioned, this breaks horribly in Firefox. It also causes some issues with text sometimes being cut off on Safari. As the date of writing, only Chrome shows a satisfying result.
In this case you can avoid column-span completely:
article {
// no need
}
article > p:nth-child(1) {
// no need
}
article > p:nth-child(n+2) {
column-count: 2;
}
article > h2 {
// no need
}
You can apply the style directly on the paragraphs.
The result looks fine on Firefox, Safari and Chrome. And it's less code. So maybe you can adjust your HTML a little so you simply don't rely on column-span at all.
Here's what worked for me:
#supports not (column-span: all) {
.some-css-class {
position: absolute;
left: 0;
top: -10;
width: 100%;
}
}
I based my solution off the code presented here: https://css-tricks.com/forums/topic/any-ideas-for-firefox-column-span-solution/. You can try using top: 0 but I made the value negative because top: 0 caused the element to appear at the very top of the page instead of below the two columns as I intended (which any negative value seemed to fix).
Related
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.
As part of some performance testing, I want to see how many DOM elements there are within a page at any given time.
Initially I used the console and manually typed: document.getElementsByTagName('*').length
But being that elements are dynamically added and removed, I wanted a way to show this automatically without having to do this manually.
Using CSS counters seemed to be the easiest way for me to do this:
(Here's a demo: see the yellow box in the top right)
html {
counter-reset: elems;
counter-increment: elems;
}
html * {
counter-increment: elems;
}
body:after {
content: counter(elems) ' elements';
position: absolute;
top:0;
right: 0;
padding: 0.5rem;
background-color: yellow;
z-index: 1000000000; /* make sure display appears on top */
}
html + head + body = 3... +
A section with 4 divs = 5..... 3 + 5 = 8
<section>
<div>div1</div>
<div>div2
<div>div3</div>
</div>
<div>div4</div>
<section>
The problem is that this technique is not working for some more complex websites, and i'm guessing that it's because it's somehow naive.
Take for instance wikipedia's main page - I used the browser inspector to add the above css-counter css and that produced "888 elements"
However when I used the console document.getElementsByTagName('*').length - it returned 975 elements.
So my question is:
What is causing this huge discrepancy in the number of DOM elements, is there something I haven't taken into account?
Can this be done reliably with CSS?
The reason you get different counts is because your counter-increment: elems; rule is lower priority than some existing counter-increment rules in Wikipedia's stylesheet, so there are elements which increment other counters (one example is named "listitem") but not yours.
You'd have to make your selector more specific and override Wikipedia's, or add the website's own counter (or write some JavaScript to add your own counter in the existing counter-increment rules, to avoid breaking the existing style).
What is causing this huge discrepancy in the number of DOM elements,
is there something I haven't taken into account?
Yes, elements which have display:none applied are ignored by css counters.
From the spec:
An element that does not generate a box (for example, an element with
display set to none, or a pseudo-element with content set to none)
cannot set, reset, or increment a counter. The counter properties are
still valid on such an element, but they must have no effect.
Demo:
html {
counter-reset: elems;
counter-increment: elems; /* Include the html element as well */
}
html * {
counter-increment: elems;
}
body:after {
content: counter(elems) ' elements';
position: absolute;
top:0;
right: 0;
padding: 0.3rem;
background-color: lightyellow;
z-index: 1000000000; /* make sure display appears on top */
}
.hidden {
display: none;
}
html + head + body = 3... +
A section with 4 divs = 5..... 3 + 5 = 8
<section>
<div>div1</div>
<div>div2
<div>div3</div>
</div>
<div>div4</div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<section>
On the other hand document.getElementsByTagName('*').length WILL count elements with display:none
This may only be one of the differences which I hadn't taken into account, but I'd say it's probably the main culprit as to the discrepancy.
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
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
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.