Click event in pure CSS without:target. Target in CSS. How it works? What about semantics and accessibility
Is there a way to handle click events in CSS without using JavaScript. You can use the method with :target. But what if it can't be used? There is another method.
Watch the demo. It is completely made in CSS, not a line of JavaScript code. It is based on the original use of the:active and:hover selectors.
Description
First you need to create a container that will contain a button and blocks that are displayed when the mouse is pressed. The markup structure will be something like this:
We need to make .content invisible until the mouse button is pressed on .wrapper . To solve the problem, set the .content property display: none . Then, when the mouse button is pressed on .wrapper, we will include the display: block property for .content. Why set the .wrapper:active .content property display: block . In this state, .content will only be visible when the mouse button is pressed. If you release it, .content will disappear again. To fix this, let's make sure that when the mouse cursor is over .content , the element is assigned the display: block property. That is, we set the display: block property for .content:hover. The CSS code will look like:
Content ( display: none; ) .wrapper:active .content ( display: block; ) .content:hover ( display: block; )
All that remains is to “comb it” appearance and make it clearer:
Wrapper ( position: relative; ) .button ( background: yellow; height: 20px; width: 150px; ) .content ( position: absolute; padding-top: 20px; ) .content li ( background: red; )
The button text in the above code will have a yellow background, and the information displayed when the mouse button is pressed will have a red background.
You can easily find many tutorials on the Internet using the pseudo-class:target. However, let's not follow someone else's code, but try to understand it and understand how it works? Of course, we can’t do without examples.
What is:target?
In CSS:target, this is a pseudo-class that allows you to select a whole “piece” of your HTML document on which some action will be performed. This could be a paragraph of text or a heading, for example.
Pseudo-classes should not be confused with pseudo-elements, which can select only a certain part of an element, such as the first letter or the first line of a paragraph.
Pseudo-classes:
- a:link(color:#111)
- a:hover(color:#222)
- div:first-child(color:#333)
Pseudo-elements:
- p::first-letter(color:#444)
- p::first-line(color:#555)
I think it's clear from the syntax what this or that pseudo-class or pseudo-element does. The most popular pseudo-class is :hover, all webmasters come across it; it describes the styles of an element when hovering. target works similarly and describes the styles of an element when a certain situation occurs.
Fragment IDs
In short, this is a thing to which our pseudo-class is tied. This is a hashtag with a word or phrase that is placed at the end of the address. It looks like this:
This technique can be used for transitions within an article. For example, at the beginning of the article you create a small table of contents, when clicking on an element of which a person is taken to the section where the link leads; the section needs to add an identifier.
This works for pure HTML, no tricks required. Small identifiers.
Handling a click using:target
Now let’s try to make sure that when you click on the desired section from our improvised menu, the title style changes, showing which paragraph is currently active.
H1 ( font: 30px Arial sans-serif; ) h1:target ( font-size: 50px; text-decoration: underline; color: #37aee4; )
The code is very simple - when clicked, the title changes its size, color and is underlined. You can add life (Ruslan, hi) and make an animation for changing the title color:
H1 ( font: 30px Arial sans-serif; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; )
Highlighting the active title is a good thing, but what if you need to change the design of the text that follows it? CSS gives us this opportunity. It looks like this:
H1:target + p ( background: #eaeaea; padding: 10px; )
In this case, the plus sign means that the style should be applied to the paragraph following the heading. Thus, when the active header changes, we also change the section design with the text that “belongs” to him.
Browser support
The target pseudo-class belongs to the third edition of CSS and is perfectly supported by all browsers except IE, older than version 9. Therefore, you should not implement it if your audience uses this browser. Although, there is a way out - this is Selectvizr, a JS library with which you can make IE work with CSS3. We just add the script and that's it, it works.
The only thing is, if you don’t use JQuery or MooTools, you need to connect it for this script to work. The official website has a table showing which libraries support what. If you are interested, read it. This .
Conclusion
Using pseudo classes may seem complicated, but once you understand how they work, you can do amazing things using just CSS and nothing else. Pseudo-class:target- excellent confirmation of this. With its help, you can radically change the interaction of a page with a visitor. The example above is the simplest, but it still adds a bit of interactivity to the page. But this is just a couple of lines of code.
Don't overdo it with beauty and browser support and everything will be fine.
Have a nice day
target="_blank is used to make the tag opened the link in a new window. But what is target HTML? Why should it be blank? And the most interesting thing is, why is there an underscore at the beginning? Let's take a closer look at this code and understand what it does.
target attribute
Target values
The four most common values for the target attribute are:
_self
The only situation in which this can happen is if the tag is used in the HTML
_blank
Opens a link in a new tab or window. This is determined by the user's local settings, in most browsers this is a new tab page. You might think that using this value you can implement pop-up ad units. But that's not true. Most often, JavaScript is used for this rather than HTML.
This target HTML attribute value is best used to open links to external sites or PDF files in a new tab. Thanks to this, after closing these tabs, the user is returned to your site. But this should not be abused, since it will be quite difficult for the user to navigate if each link opens in a new tab.
_parent
The value _parent opens a link in the parent frame for the frame you are in. This is not a popular value, since the tags for creating frames