Does my sr-only alternative seem correct to you? - css

display:none or visibility:hidden are not good ideas to hide a focusable element, because screen readers cannot see them.
This is the "traditional" way to hide an element from view but keep it accessible :
.sr-only {
border: 0;
clip: rect(0,0,0,0);
clip-path: inset(50%);
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
I started to use my own like this for check boxes, radio buttons that I style with their labels :
[type=radio], [type=checkbox] {
position: absolute; /* keeps it out of flow */
opacity: 0; /* makes it invisible */
pointer-events: none; /* being able to click the content below */
}
[type=radio] + label , [type=checkbox] + label {
/* custom styling */
}
[type=radio]:checked + label , [type=checkbox]:checked + label {
/* custom styling */
}
Do you see any big issue with that idea ?
New proposal edit after investigations :
.hidden {
position: absolute;
opacity: 0.001;
pointer-events: none;
}
/* OR */
.hidden {
position: absolute;
opacity: 0.001;
z-index: -999
}
For tests : https://jsfiddle.net/pLyo52f3/

I would suggest that the problem here is that you are applying .sr-only styling to style focusable form elements. If you look at a library like Bootstrap, they have a set of utility classes for focusable and non-focusable screen reader text. You'll note that in their example they are applying the "focusable" variant to anchor text.
Bootstrap indeed has custom styled radio buttons and other form elements. However, you'll note that they are not extending or otherwise leveraging their screen reader text styling. Instead, they are utilizing appearance: none to remove platform-specific styles and allow for custom styling of the form element. This is the idiomatic and accessible manner in which to achieve custom styled form elements.
Slugolicious's comment is quite apt. While you may not opt to leverage Bootstrap (or a similarly mature UI framework) directly, feel free to borrow liberally from them; they have spent years honing and iterating on this code to maximize consistency and accessibility across platforms. Spinning your own would likely be wasted effort.

Related

Why Codemirror editor does NOT scroll horizontally with long line?

I've a code mirror version: 5.65.3 with Blazor. When I've a long line in the editor the horizontal scroll doesn't work, it rather uses the scroll of the page which mess out the whole page.
Like this:
I don't think that I changed any CSS in Codemirror.
Here is some related CSS lines:
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 750px;
color: black;
direction: ltr;
}
.CodeMirror-scroll {
overflow: scroll !important; /* Things will break if this is overridden */
/* 50px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror */
margin-bottom: -50px; margin-right: -50px;
padding-bottom: 50px;
height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
position: relative;
z-index: 0;
}
I'm calling the codemirror through this code: (the onchange is because I'm using Blazor for binding purposes )
window.editor= function (dontNetObjRef) {
editor = CodeMirror.fromTextArea(document.getElementById('myTextArea'), {
lineNumbers: true,
indentUnit: 4,
lineWrapping: true,
tabMode: "shift",
gutters: ["CodeMirror-lint-markers"]
});
//JavaScript function use the onchange event of CodeMirror to invoke the C# method and pass the value of the myTextArea .
editor.on("change", editor => {
dontNetObjRef.invokeMethodAsync("UpdateField", editor.getValue());
// console.log(editor.getValue());
});
Note: even if I used lineWrapping: true it moved to the second line and does the same issue with scroll.
Also, it works well when I set a fixed width like 1000px but I'd like to make it auto in case the screen size of the user changes.
Thanks to Jax-p for giving me some hints to fix the issue.
I've add width:70vw in .CodeMirror class and max-width:70vm in .CodeMirror-scroll
Another thing that was affecting the changes is that I was putting the textarea in inside a <div class=col-11> which was affecting the width in the CSS so I just removed that and everything is working.
While working on a project I've encountered the same issue - that is a problem with CSS.
I fixed it with that pretty simple flexbox solution:
<div class="root-wrapper"> <!-- Editor parent container -->
<div class="cm-editor ͼ1 ͼ2 ͼ4"> <!-- CodeMirror stuff (v6 in my case) -->
...
</div>
</div>
The corresponding styling:
.root-wrapper {
display: flex;
flex-direction: row;
.cm-editor {
width: 0;
flex-grow: 1;
}
}

How can I combine the same CSS properties for different elements?

I have two elements: tooltip and tooltip-line.
There is common properties for each elements:
[tooltip]::after, [tooltip-line]::after {
position: absolute;
opacity: 0;
visibility: hidden;
/* Other common properties */
}
Next, I have different properties for each element.
[tooltip-line]::after { /* One line tooltip */
content: attr(tooltip-line);
white-space: nowrap;
}
[tooltip]::after { /* Multiline tooltip */
content: attr(tooltip);
width: 200px;
white-space: normal;
}
Is this a correct usage? Including similar classes. Or should I copy all properties to each declaration block?
Here's a different approach which might be slightly more scalable. Using CSS custom variables, we can override any default class values by resetting them in the multiline class. Finally, I would make the attributes containing the tooltip content identical—and valid data attributes—if possible.
.tooltip::after {
--tooltip-white-space: nowrap;
content: attr(data-tooltip-content);
white-space: var(--tooltip-white-space);
}
.tooltip.multiline::after {
--tooltip-white-space: normal;
}
.container {
width: 250px;
border: 1px solid red;
}
<div class="container">
<div class="tooltip" data-tooltip-content="my tooltip content should not wrap no matter what"></div>
<div class="tooltip multiline" data-tooltip-content="my multliline tooltip content should wrap"></div>
</div>
jsFiddle
It's absolutely right to divide the css in multiple blocks.
One of the first thing to know while writing code in any language is NOT to repeat yourself.

How to target Social Sharing button (Facebook, Twitter, LinkedIn) groups using CSS?

I currently am styling my social sharing buttons using groupings (all Facebook buttons have a set style, all Twitter buttons do, etc.). Currently, I achieve this using a massive grouping of YUI's for each button type - this makes creating new sharing buttons extremely tedious, as I have to inspect each button to find its ID. Below is the code that stylizes my Facebook share buttons. The format is identical for my other button types, just with different YUIs - woefully lengthy. However, my code is functional as is:
#block-yui_3_17_2_1_1486492076694_136568, #block-yui_3_17_2_1_1486492076694_229456, #block-yui_3_17_2_1_1486492076694_301518, #block-yui_3_17_2_1_1486492076694_346464, #block-yui_3_17_2_1_1486492076694_390386, #block-yui_3_17_2_1_1486497764071_38998, #block-yui_3_17_2_1_1486497764071_84939, #block-yui_3_17_2_1_1486497764071_127888, #block-yui_3_17_2_1_1486497764071_167750, #block-yui_3_17_2_1_1486497764071_210706, #block-yui_3_17_2_1_1486762828716_16671, #block-yui_3_17_2_1_1487613145787_165402, #block-yui_3_17_2_1_1488578082993_168899, #block-yui_3_17_2_1_1489175439402_256947, #block-yui_3_17_2_1_1489873739917_158023, #block-yui_3_17_2_1_1490053051323_201623, #block-yui_3_17_2_1_1490837162453_152647, #block-yui_3_17_2_1_1491429139219_249912, #block-yui_3_17_2_1_1491948942477_176351 {
display: inline-block;
padding-bottom: 0;
padding-top: 0;
}
Ideally, I'd like to target each button type using their respective classes to REALLY consolidate the amount of code I have written (and make future additions much more efficient). I've tried everything I could think of, but nothing seems to work.
I'm currently working on the Squarespace platform.
Your problem might be because of Squarespace's default styles. When targeting elements, CSS prefers the more precise selector:
.social-icon {
background-color: red;
/* Less preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* More preferred */
}
You can override this by using !important:
.social-icon {
background-color: red !important;
/* More preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* Less preferred */
}
so when you style your social icons, use !important to override Squarespace's default styles.
.social-icon {
display: inline-block !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
Hope this helps!

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.

Hide all elements except one div for print view

I have the following CSS for my print style:
* {
display:none;
}
#printableArea {
display:block;
}
I expected this to hide all elements, and only show the printableArea, however everything gets hidden. In print view, all I get is a blank page.
I have it included properly in the HEAD, with media="print" on this particular stylesheet.
If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).
* matches the <html> element, so the entire document is hidden.
You need to be more selective about what you hide.
You're taking the right general approach, but you want to use visibility: hidden instead of display: none so that you can set child elements to be visible.
See Print <div id=printarea></div> only?
html body * {
display:none;
}
#printableArea {
display:block;
}
Also, you may need an !important on #printableArea, but probably not.
Answering because I found this question while searching for this
Instead of 'display: none' you can use :
* {
visibility: hidden;
margin:0; padding:0;
}
#printableArea * {
visibility: visible;
}
source : https://www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa
You might try popping it up on top of everything. This solved 90% of my problems, then I just had to make a .noprint class and add it to a few straggling elements.
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
If you want to use JavaScript, you can try this simple snippet that doesn't even require jQuery:
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
make a div wrap everything after the body tag. Before the wrap div, put the visible item's div.
I had to do this to make a simple username-password page, and needed to hide everything, except the half-opaque sign-in form's background. So, after the correct credentials were typed in, the form would animate out, and the half-opaque page cover would animate out, and finally, EVERYTHING aside would show up and you could use the page normally.
There is a one-line solution:
With JQuery
var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));
Without JQuery
var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });
In both examples, set the selector variable to the selector you want. For example, div#page:hover or p.class1,p.class2
#media print {
* {
visibility: hidden;
}
/* Show element to print, and any children he has. */
.svgContainer, .svgContainer * {
visibility: initial;
}
}
Make sure any children elements are also visible. Remember that invisible elements still influence positionning of other elements in the page. In my (simple) case, I just added position: fixed; on .svgContainer (somewhere else).
Simply you can use the following code and assign "hide" class to that specific element you dont want to display on print page
<style type="text/css" media="print">
img
{
display:none;
}
.hide
{
display:none;
}
</style>
There is another clean way to achieve this:
* {
visibility: hidden;
}
#printableArea {
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
That way you're going to get only the #printableArea element in the print view and all of the other elements will be hidden.

Resources