Focus-within the use of a detailed

This time to everyone to bring the use of Focus-within detailed, the use of Focus-within Note what, the following is the actual case, together to see.

The world of CSS is really a magical world. Perhaps many front-end developers have heard: Focus has not heard: Focus-within. So: What the hell is focus-within. This article, we say: Focus-within this stuff.

: What is Focus-within?

In CSS: Focus-within is a pseudo-class and is now included in the CSS selector (CSS level 4 selector). He's like you know: Focus or: hover. : The Focus-within can be very convenient to handle the gain focus state. When the element itself or its descendant elements have the focus, the elements of the Focus-within pseudo-class are valid.

If the text is not easy to understand, let's start by looking at a simple example:

<p class= "Form-group" >    <label for= "email" >        Your Email:    </label>    <input type= " Email "name=" email "id=" email "placeholder=" Enter your email address "/></p>

Above is a simple form that has an input form control.

. form-group *:focus {    background:yellow;    Color: #000;}. Form-group {    padding:10px;    Border:3px solid Transparent}.form-group:focus-within {    border-color: #000;}

In the above example, when the. Form-group gets the focus, the Border-color color is replaced with a #000. But this does not mean receiving keyboard focus, because <p> does not necessarily get the focus of the keyboard, not setting the TabIndex. or if the link or INPUT element in P receives the focus, the. Form-group element changes the border color.

See the above example, is not to feel good magic. To achieve similar results in the past, we need JavaScript scripts. Pass the mouse or keyboard event of the descendant element of the. Form-group, and then give its parent element (or ancestor element, add the corresponding style).

: Focus-within's usage scenario

: Focus-within is very powerful, mainly because the pseudo-class will be activated when any of its elements get to the focus. Use this pseudo-class sparingly when the element contains many subcomponents.

With: After Focus-within, there are some common interactions that become very simple, especially the interaction of keyboard events that previously required JavaScript, and we can use: Focus-within instead.

Next, let's look at some common examples of focus-within.

Highlighting of table rows

A common example is the behavior of the table row highlighting, that is, when the mouse hovers over the row of the table, the color becomes highlighted. This interaction style can help visually impaired users to better read a complex table or long table. Because of the highlighted display, you can use these users to more easily track the table rows that they are currently reading. The usual way to do this is to change the style of the table row by: hover, which is easy for a normal user, but if your users are a bit of a user who has a problem with the mouse, that is: hover has a little egg ache. If you are in pursuit of perfection, you may be able to add styles to table rows through JavaScript keyboard events.

Then there is: after Focus-within, we can say goodbye to JavaScript. We can set the style like this:

The above example shows how to use: Focus-within to highlight the entire row of a table. If there is an available element in a particular table row that can get the focus, this refers to getting the focus through the keyboard. For example above, there are <a> elements in the table, you know, a element can get focus through the keyboard.

At this point you only need to add in the style:

Tbody tr:focus-within,tbody tr:hover {    Background:rgba (LightBlue,. 4);}

Drop-down menu

The drop-down menu is one of our most common Web components. When I first saw: Focus-within this pseudo-class, the first use scenario I thought of was a drop-down menu.

In the above example, JavaScript is used to track the user's keyboard focus in a navigation drop-down menu. If JavaScript detects that the keyboard focus is on a link, add a. Has-focus class to the. Navlist_drop. When Li has the. Has-focus class, his child elements are displayed, that is, the drop-down menu is displayed.

This effect, we can directly through: Focus-within to replace the function of JavaScript script. Use. Navlistdrop:focus-within instead of. Navlistdrop.has-focus. The drop-down menu is displayed when you manipulate the keyboard to get the focus of the drop-down menu item.

. navlist A:focus +. Navlistdrop,.has-drop:hover. navlistdrop,.navlistdrop:focus-within {    opacity:1;    Transform:translatey (0px);    Height:auto;    Z-index:1;}

Off-screen Nav

Off-screen nav is a common effect on the mobile side. Then this effect can also be achieved by: Focus-within. The detailed code can be seen in the following example:

Browser compatibility

: Focus-within Although very interesting, but many students worry about its compatibility. With Caniuse, we can see how the browser supports the situation:

Summarize

If you're familiar with: Focus isn't surprising, but you know: Focus-within, you're constantly focusing on new CSS-related features. Of course this property again refreshed the CSS of the world is really strange. If you are interested, do not write your own demo. You're going to love this property.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 Text Gradient Animation

CSS3 Make semicircular arcs

How sticker-footer layouts are used in CSS