I am currently learning about developing for accessibility and I'm going down the list of tags.
When using abbreviations, I would normally type:
<abbr full="As Soon as Possible">ASAP</abbr>
For VoiceOver, it reads the full-attribute (not sure about the other screen readers).
Is it necessary to include aria-label for this case? I know that the full-attribute would be ignored since the aria-label is present, but is it good practice to have it? Or is it overkill?
<abbr aria-label="As Soon as Possible" full="As Soon as Possible">ASAP</abbr>
Related
Can I force CKEditor to always make the first line H1 by default? Then, after hitting enter, I want everything else to be "normal" by default.
The reason is essentially to seamlessly generate a title without requiring a separate title field.
No, it's (probably) impossible. Mostly because you'd need to hack selection, block all the commands except H1 format and so on. You'd spend a lot of time but the result would be hacky and unstable, totally not worth your effort. Simply, this is not what CKEditor has been made for.
The fastest way to do this is to implement a separate field in the form (<input>) or, if you want to have a rich editing features (like links or colors in <h1>), create an inline editor instance out of <h1> like
<h1 contenteditable="true" id="title">Title</h1>
CKEDITOR.inline( 'title', { ...config } );
and collect the value using CKEDITOR.instances.title.getData(). There's a editor#change event, that might be helpful if you decide to synchronise your inline editor with a hidden field in a form.
CSS Selectors are parsed right to left, and then displayed.
With this in mind, based on this code:
<a href="#" class="myImage">
<img>
</a>
Which is more performant?:
.myImage img
or
.myImage img:only-child
Does :only-child help specificity in selector selection? So instead of initially matching all <img> in the document then looking for the parent class, does it only match <img>'s that are the only child (thereby reducing the pool of selections)?
reference read: http://csswizardry.com/2011/09/writing-efficient-css-selectors/
EDIT
Found further reading:
The sad truth about CSS3 selectors is that they really shouldn’t be
used at all if you care about page performance. Decorating your markup
with classes and ids and matching purely on those while avoiding all
uses of sibling, descendant and child selectors will actually make a
page perform significantly better in all browsers.
-David Hyatt (architect for Safari and WebKit, also worked on Mozilla, Camino, and Firefox)
Source: http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
Alright, so this depends completely on the use case. What I'm going to do is handle cases.
Point 1 - Concerning given example
Case A
Say your code is simply:
<a href="#" class="myImage">
<img>
</a>
In this case .myImage img and .myImage img:only-child will have essentially identical performance hits. Reason being is as follows:
CSS performance hits are derived from having to style or re-style boxes. What CSS does is affect your graphics processor, not the CPU, so we only care about visual updates. And styling things again with duplicate properties DOES cause a redraw (By this I mean duplicate properties that are applied at a later time, which selectors generally cause).
Usually, .myImage img would style ALL <img>s in .myImage. While using the only-child selector may not style all (obviously).
But in this example, both .myImage img and .myImage img:only-child would do identical things, since they would both cause 1 draw/redraw on the same box.
Case B
But suppose we have:
<a href="#" class="myImage">
<img>
<img>
</a>
Here though, we have a different story.
In this example, only-child wouldn't work at all, since <img> is not the only child.
Case C
Finally, suppose you have this, but you only want to style the under the :
<a href="#" class="myImage">
<img>
</a>
<div class="myImage>
<img>
<img>
</div>
In this case, using the only-child selector would be significantly better performance-wise, since you only will style one element, instead of three.
Conclusion and Takeaway
Basically, remember a few things.
CSS selectors help you with writing code because you get to add less IDs and Classes, however, they are almost always less efficient than using all IDs and Classes, because using selectors will causes extra redraws. (Since you'll inevitably style multiple elements with some selector, and then re-style other things with IDs or classes, causing unnecessary redraws)
only-child is NOT faster than .class child if that .class only has one child.
Technically what you are comparing are two completely different things, used for different purposes.
Conclusion
In final answer to your question. In your shown example, neither is more efficient than the other since they cause identical redraws.
However, as
"Does :only-child help specificity in selector selection?"
goes: Yes, that's the point of the selector. See: http://www.w3schools.com/cssref/sel_only-child.asp
Sources:
I am a significant volunteer developer for Mozilla Thunderbird and the Mozilla project and work in the CSS area.
FYI
There are of course weird exceptions to this, but I won't go over them here since I think your exact question doesn't give a brilliant example.
Point 2 - Concerning speed of find selectors
I am purposely trying to drive home the point that it is the drawing the causes the CSS perf hit, not finding the selectors. However, the reason I say this is not because finding selectors takes no time, but instead because it's time is miniscule to the time caused by drawing. That said, if you did have 5,000 <div>s or something, and attempted to style a few using pseudo selectors, it would definitely a little longer than using CSS classes and IDs.
Again though, in your example it would make no difference, since it would look through each element anyway. Why only-child is helpful perf-wise is because it would stop searching for some element after it finds more than one child, whereas simply doing class child would not.
The problem with pseudo selectors is that they usually require a lot of extra searching AND it happens after IDs, classes, and such.
The links you provided are actually very helpful and I'm surprised they didn't answer your question.
One thing I should point out is that many selectors believed to be slow may be vastly improved now. See: http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/
Remember selector performance is only important on very large websites.
I have Just started using Sublime Text 2 and am having problems with the matching brackets. withing <h1> tags
It will match the closing bracket almost everywhere else in my document.
not sure what i need to change to make it work anywhere in my document regardless of the context.
I need this functionality as i am using angular.js and need to add {{variable}}
I am not quite sure what you are asking. Do you need to perform some kind of search replacement or find the matching element?
However there exists a plugin called Emmet which has functions of Go to matching pair, Match pair inwards and Match pair outwards.
You can also perform complex HTML tree modifications with this plugin.
It sounds like your autocomplete might be turned off.
In your user settings, add "auto_complete_commit_on_tab": true
some browser plugin, like readability can extract the 'article' from a webpage. Does anyone has idea about how to do it? What's the difference between the real articles and ads or comments?
Well, it depends how you want to define "real articles"...
Taking HTML5 into consideration, a webpage is constructed of semantic tags. Pages no longer have to be built with elements like <div> that have exactly no semantic meaning. In HTML5 you may use <section>, <article>, <header> and so on. Those elements can give an application pretty good sense of what is the main content of a webpage (e.g. print <article>s and skip <nav>s...)
Of course, not many pages use those tags yet. Furthermore, the tags might get abused and lose their meaning. In that case I'd stick to some statistics, e.g. selecting the largest elements in a HTML document. Moreover, if you have to scrape a webpage, you could use a modification of some pattern-matching algorithm, DIPRE for instance.
I don't find the oft-used "*" to be very nice looking - can anyone suggest a nicer-looking method or point me to an example?
I tried making the field highlighted in red as one person suggested but I did not like the look.
Bold labels might do the trick.
But I really like the idea of "Required" being shown in grey in the field until text is added. Does anyone have code for this?
Generally speaking, the best web forms are the simplest ones that require me to think the least. The "standard" that has evolved is that required fields have an asterisk (*) next to them. Sometimes the asterisk is red to help it stand out a bit.
Why fight the standard? Don't make your users think too much. Go with the standard and keep your creativity for more important things.
If you're going to use colour to highlight the field, bear in mind that some people are colour-blind (so maybe provide another indicator too)
If you use stylesheets to format your HTML, then you can create a style for .mandatory. As an example, set the mandatory input to use this style, then you can play with it more easily until you have the right mix of color, border, and other style elements to suit your overall design.
HTML
<input id="username" type="text" class="mandatory" />
CSS
.mandatory {
color: red;
font-size: 12pt;
font-weight: bold;
font-style: italic;
}
I also use the asterisk as the OP mentioned as a "backup".
-R
Sometimes it really is justifiable to mark fields as mandatory and optional. However, before you do so, you should question whether it is reasonable to ask the user any non-mandatory information. This applies especially in registration forms.
In registration forms and such, it is much better to ask only the minimum information. After the registration the user can, at will, fill out optional information in separate forms.
After all the unnecessary cruft has been taken out from the form, you might see that there is no need to mark fields as mandatory; either everything is mandatory, or it might be so obvious to the user which fields are optional, that there would be no need to give visual cues about it.
add style="border: thin red solid;" to the element
I've found the answers on LukeW.com to be the most useful. because there isn't a simple solution here. It depends on what percentage of the fields are required, how many fields are in your form, and how long your labels are. For the vast majority of the web, people understand bold to be required, and normal-weight to be optional (if any options are bolded). Only after form validation fails would I present the user with the required-yet-skipped input boxes highlighted.
I typically have no objections to seeing (required) in a smaller font either right below the field name or adjacent to the entry field.
I could also see using a "textbox watermark" to have the field say "required" in it until they bring focus to the field and start typing.
I like the way it is done in the ASP.NET Ajax Control Toolkit for the ValidatorCallout control:
Might want to check out www.PeterBlum.com - His Professional Validation Package rocks for validating and formatting of controls. He has tutorials for using and numerous examples as well as a detailed manual.