color

Maybe you write color: # XXX every day, but do you remember what color is? Your first reaction is not: font color.

If so, unfortunately, color is the CSS you forgot about.

If so, have you ever wondered if font size is called font-size, font weight, font type is called font-family… Why is it that the font color is color instead of font color? And why is there no place for color in the font abbreviation?

All because of color, not font color.

Color — better called foreground color. The word “foreground color” is a very strange word in CSS. It is the opposite of background-color. Yes, that’s the real color, as opposed to background-color.

The question is, what is a foreground view? Colors that are not in the background are the foreground… Hehe, kind of fart feeling.

Another question, which colors are the foreground colors? Except for background-color, everything is the foreground color… Crazy ~~

In addition to background-color, there is the following color for the foreground color:

1. Font color: There is no font-color, only color can be set
2. Border-color: indicates the border color
3. Outline-color: indicates the outline color
4. Column-rule-color: border color between columns
5. Text-decoration-color: indicates the color of the underline
6. Text-shadow: specifies the color in text-shadow
7. Box-shadow: color in box-shadow

In addition to 1, what is the relationship between these foreground colors and color? You’re smart enough to figure it out. Yes, the default.

In the absence of color values from 2 to 7 above, the browser calculates these colors as color.

Here’s a corn:

component.sankuai.com/component/@…

Two sets of buttons

Take a quick look at the CSS code for one of the fill and stroke buttons:

Types Group button styles




Line Shape Group button style

For this component, for example, IF I want to add a blue fill button and a blue stroke button, I need to add border-color and background-color for the fill button, and border-color and border-color for the stroke button. Is there an easier way to do this? The answer is yes. Use color to do this.

<style> .btn { font-size: 20px; padding: 1em 2em; border-radius: 5px; position: relative; background-color: transparent; outline: 0; overflow: hidden; border: 2px solid; } .btn.fill::after{ content: ''; box-sizing: border-box; border-width: 2em; border-style: solid; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; } .btn.fill span { color: white; position: relative; z-index: 1; } button.orange { color: #f80; } .btn.green { color: #06c1ae; } .btn.red { color: #ec5300; } .btn.grey { color: #d2d2d2; </style> <button class=" BTN orange fill"><span> button 0</span></button> < class=" BTN orange stroke"> button 1</button> <button class=" BTN green fill"><span> button 2</span></button> <button class=" BTN green stroke"> button 3</button> <button Class =" BTN red fill"><span> button 4</span></button> <button class=" BTN red stroke"> button 5</button> <button class=" BTN grey" Fill "><span> button 6</span></button> < class=" BTN grey stroke"> button 7</button>Copy the code

border-style

Using border to implement various triangles is a familiar trick. How about using border to realize circle, realize three-line [Photo 4], which can be seen in Boostrap when doing responsive menu), etc.?

A simple circular application:

Use border-style to implement waves

We see that there is a wave separating the upper and lower content, so how do we implement this wave?

<style> .up, .down { height: 100px; width: 100%; position: relative; padding:2em; box-sizing: border-box; } .up { background-color: #fecd0f; color: #666; } .up::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; border-bottom: 8px dotted white; } </style> <div style="box-shadow:0 0 4px; width:250px;" > <div class="up"> The top is here </div> <div class="down"> the bottom is here </div> </div>Copy the code

Three horizontal lines

Use border-style to implement three horizontal lines

The implementation of the:

<style>
  .menu {
    display: inline-block;
    border-width: 9px;
    border-bottom-style: double;
    border-top: 3px solid;
    border-color: #fecd0f;
    width: 2em;
    height: 3px;
  }
</style>
<i class="menu"></i>
Copy the code

Other implementations:

Select the radio

<style>
  .radio {
    display: inline-block;
    border: 9px double #fecd0f;
    border-radius: 50%;
  }
</style>
<i class="radio"></i>
Copy the code

The anchor and: target

Anchor points that can quickly scroll pages to specific locations; The :target selector can select the current anchor point.

Anchor positioning is a completely ignored positioning technology, after all, JS is now popular, there will always be no front end to write a few lines of JS, it is very convenient. This is not to say that there is nothing wrong with either good or bad. “A black cat or a white cat is a good cat if it catches mice.”

Consider a scenario, on mobile, using Hybrid technology or Web pages, as shown below:

The mask scenario

When you click “Details” next to the bottom price, the following mask will appear

The mask

Now, there is one operation to consider: return. There are two ways to return: 1. Click the custom return button in the upper left corner; 2. Android users click the back button on their phones.

When the user returns, the best thing to do is just close the mask and display the previous page. To do this, approach 1 is relatively simple; In mode 2, Hybrid usually adds a “back” monitoring function directly to JSBridge, which is handled by Bridge.

So the question is, is it really necessary? Or, what if it’s just a Web page without Hybrid’s JSBridge?

At least for now, JS has no way to listen for system-level returns, and anchors and: targets can do this for us.

<style> #click-target { display: inline-block; line-height: 3em; width: 7em; text-align: center; background-color: #f80; color: white; outline: none; } .my-target { position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); color: white; transform: translateY(100%); } .my-target.width-animate-out { transition: transform .2s ease-in-out; } .my-target:target { transform: translateY(0); </style> <a href="#my-target" id="click-target"> </a> <div id="my-target" class="my-target width-animate out"> I pop it out ~~</div>Copy the code

In addition to target having a “location” function, input is also a good location Hack. Those who are interested can do their own research.

Anchors certainly have their problems, and every technology has its own scenarios. For example, anchors create a history, which is one of the most important things to consider. The rest, as you’ll see, I won’t go into detail here.

Timing to hide

In general, we habitually use toast when dealing with an error alert on a page or an operation, setting a time for the toast to disappear after a certain period of time. This is a familiar scenario for the front end, and our code often looks like this:

SetTiimeout (function () {/ / off after ather thatElement. Style. The display = 'none'}, 1000)Copy the code

Aside from what you already know about setTiimeout, can you think about what else to do? In CSS, timing also exists, but we usually ignore it, or we don’t look at it differently. It’s time dependent. CSS is animation.

A transition or animation will do just fine. We just need to define transition-delay or animation-delay, which is a timing that we ignore. The implementation and code are as follows:

<style> .toast-container { position: relative; border: 2px dashed #f33; border-radius: .5em; Padding: 2.5 em. overflow: hidden; } .toast { position: absolute; top: -100%; left: 0; width: 100%; text-align: center; background: rgba(0, 0, 0, .7); color: white; pointer-events: none; transition-property: top, opacity, transform; transition-duration: .5s, 2s, .2s; The transition - delay: 0 s, 1.5 s, 3.5 s; transition-timing-function: ease-in-out; transform: translateY(0); opacity: 1; padding: .5em 0; } #toast-trigger:checked ~ .toast { top: 0; opacity: 0; transform: translateY(-100%); } </style> <div class="toast-container"> <input type="checkbox" id="toast-trigger" /> <label for="toast-trigger">Show me </label> < I class="toast">Copy the code

The example uses Transition. Similarly, you can use animation to implement other timed tasks. For setInterval any, we just need to use animation-revival-count: infinite; Can. Of course, it is better to use setTimeout/setInterval or requestAnimationFrame for timed tasks that are too complex. Again, there are scenarios for all technologies.

Width to height ratio scaling

When working with images, we sometimes need to make sure that the width and height of the image maintain a certain ratio R. When the screen width or height changes, our image can be scaled according to the ratio R. For example:

Initially, screen width = 1000px, image width = screen width * 0.5 = 500px, height = image width * 0.6 = 300px

Zoom the screen width = 800px, then use the above scale, you need an image: width = 400px, height = 240px

The clunky method is: listen for resize => get the screen width => calculate the image width => style assignment

This way, not only is it stupid, but it’s also very performance-intensive. Either step is very performance intensive (performance relevant: fundamentals of browser rendering)

When a function has the following conditions:

1. Using JS is too performance intensive
2. Too much style calculation involved

You need to consider whether you can use CSS

In this scenario, it is both performance-intensive and computationally intensive, and also dimensioning. Listening to resize and calling callbacks is a front end no-no. So, can CSS solve this? The answer is yes.

This brings us to another forgotten CSS: the percentage values of the padding and margin.

Padding and margin are interesting things, but they give us a nice way to evaluate things :(since we only use padding in this example, we will only use padding.)

When the padding value is a percentage, the computed value is relative to the width of the contained block

This is a very interesting calculation rule, which means that our aspect ratio scaling can be solved perfectly.

First, we need an element to define the aspect ratio:

<div style="width: 50%; padding-top: 30%; height: 0;" ></div>Copy the code

Here, we define the div width as 50%, which is screen width * 0.5; Then, the padding-top: 30%, which is the screen width * 0.3, which is exactly the same as the image width * 0.6. That’s the ratio we want. Height: 0 is just to keep it clean.

Second, we need a child element that is 100% wide and high to hold the real content.

<div style="width: 50%; padding-top: 30%; height:0;" > <div style="width:100%; height:100%;" > Content</div> </div>Copy the code

Obviously, in this way, we can only get the following effect :(the following content has been adjusted in proportion and added a box, please do not mind)

Geometric box

We need to adjust the style to make sure that the child element gets the exact width and height of the parent element. Since our parent element has no height, only box height, to get its box height, we need to use position. Therefore:

<div style="outline:1px dashed #f88; position:relative; width: 30%; padding-top: 150%; height:0;" > <div style="outline: 1px solid green; position:absolute; top:0; left:0; width:100%; height:100%;" > Content</div> </div>Copy the code

Yes, we add position: relative to the parent element, and then we position the child element absolutely relative to the parent element, so that the element actually gets the box height of the parent element. After processing, we get the following results:

Equal ratio box final effect

In this case, our width-to-height ratio box is OK.

Someone asked: How do I get the percentage of padding calculated by height? This brings up another property that is almost never used: writing-mode, which I won’t go into here.

Click disable

Disable click, which means not responding to user clicks. When writing React, we often need a condition to determine whether to handle callback functions. Such as:

<Demo onClick={evt => this.state.disabled ? null : this.demoClicked(evt)} />

This should be a very common way to judge by code, such a disabling way, I like to call pseudo-disabling.

In fact, there’s an easier way to disable it, and actually disable it. In HTML, the concept of disabling a form element is very common. We disable a checkbox, we disable a button, but we tend to forget that disabling a button also disables the click event response, which is a real disabling.

For the above example, we can make it simpler:

<button onClick={evt => this.demoClicked(evt)} disabled={this.state.disabled} />

The former we care about is whether it is disabled when clicked; The latter we care about is whether clicking is disabled. In a real sense, the latter is reasonable, the so-called separation of responsibilities. Event callbacks should not deal with the state, they should only respond to the state, leaving the maintenance of the state to the component.

The form related

There are a lot of small uses for forms, and this article is already a little long, so I’ll continue it next time.