preface

Today we’re going to talk about some of the things that you might at first think you need JavaScript to do, but CSS can do it, even easier.

The content has been posted on gitHub, welcome to Star, more articles are posted on gitHub.

Directly into the topic

Capitalize the first letter of each word

In fact, the first time I saw this function was to use JS to achieve this function, did not think that CSS can complete this function. Immediately pidianpidian wrote a method:

function capitalizeFirst( str ) {
    let result = ' ';
    result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
    return result
}  
Copy the code

After writing this method, there is still a little complacent, also did not think of other schemes. It wasn’t until I saw that CSS could do this that I realized I was using a more complex solution to a problem that CSS could solve.

The CSS scheme is as follows:

.capitalizeFirst-css {
    text-transform: capitalize;
}
Copy the code

Isn’t it particularly simple (the code is in the blog repository above, just access the cssDo route, the following cases are under this route) :

Text-transform brief introduction

This will be the attribute, CSS2 parameters have capitalize | uppercase | lowercase | none

Parameter Description:

  1. None: default. Defines standard text with lowercase and uppercase letters.
  2. Capitalize: Each word in a text begins with a capital letter.
  3. Uppercase: defines only uppercase letters.
  4. Lowercase: only lowercase letters but no uppercase letters.

From this property we know that all upper case (lower case) requirements and this property can be easily implemented.

2. Radio highlight

You may see “radio highlight” and not react, just take a picture and you will immediately know:

I’m not sure how you dealt with the need for radio highlighting when you first saw it. The first time I directly use JS control. Later I found this requirement easier to handle with CSS.

The main code is a piece of CSS code:

.input:checked +. Colors {border-color: border-left;#e63838;
  color: #e63838;
}

<div class="single-check">
    <input class="input" type="radio" name="colors" value="1">
    <div class="colors"</div> </div>Copy the code

See the effect:

The difference between two selectors

~ selector: Finds all sibling elements following an element

+ selector: finds the next sibling of an element

extension

In fact, this technique can also be used in the navigation bar interaction effect, I think it can simplify part of the work.

3, multi-column height problem

When I did the client portrait requirement on PC side before, I met the requirement of waiting on the left and right sides (the height of the left block will change with the content).

Originally I used JS to calculate the height of the re-assignment, but this will have a page flash effect. So there are two ways to handle CSS:

  1. Each column has a large padding and a large negative margin
  2. usedisplay: table;

The first has obvious drawbacks:

  1. border-bottomCan’t see the
  2. The two rounded corners below the Settings are also missing

So I use display: table; The way to achieve contour, can be said to be very convenient.

It is recommended not to blindly contradict the table, some scenarios can be used.

4. Form validation

Note: JS is not used here, but HTML5’s new attribute — pattern(regular expressions that check control values) is used. One more thing: I haven’t actually used this in real projects.

The code is as follows:

input[type="text"]:invalid ~ input[type="submit"] {
    display: none
}

<div class="form-css">
    <input type="text" name="tel" placeholder="Enter your mobile phone number" pattern="^1[3456789]\d{9}$" required><br>
    <input type="text" name="smscode" placeholder="Enter the verification code" pattern="\d{4}" required><br>
    <input type="submit" ></input>
</div>
Copy the code

The effect is as follows (please ignore the problem of bad style) :

Invalid and vaild pseudoclasses

  • Valid pseudo-class, matching elements that are authenticated by Pattern
  • Invalid Pseudoclass that matches elements that are not authenticated by Pattern

Afterword.

I’m not going to talk about some of the more common ones, but have a nice Wednesday.

The last

You can follow my public account of the same name [Xiaosheng Fangqin], where I will share high-quality articles and we will make progress together.

If you want to join the “big front end communication group”, click on the “add group communication” to join immediately.