In the blink of an eye, 2019 will be over in less than 12 hours. Looking back on the past year, I have both gained and lost. At this last moment, send an article to the community and to yourself.

This article is excerpted from several good CSS problems (not necessarily complex, but I think it’s worth saying) that I have experienced in my work in the past year. These CSS problems are rarely encountered, and even if encountered, I do not necessarily know the solution, and even if I know the solution, I do not necessarily know the principle of the generation. At the same time, I have also prepared 2 JS questions (I have organized a long article on JS issues before, which will not be updated here). This article will update, I hope to help you friends. Looking forward to your likes, thank you.

A, CSS

1.1 Elements default to blue borders

In many browsers, the default blue border appears around the input tag elements (such as Button, text, areatext, etc.). The trigger click will look like this:

This is generated by the default outline of the element. This is a browser protection mechanism that serves to highlight the element.

// Method 1: outline: none/medium; // Method 2: outline-width: 0Copy the code

1.2 Transparent background and opaque text

We usually use the opacity to make the background transparent, this property is supported by all browsers, ok and bold use, transparency (fully transparent) from 0.0 to 1.0 (completely opaque), but this method will make its all child elements are transparent, as if just want to make the background transparent, other opaque, you can use the rgba processing background:

background-color: rgba( red , green , blue , alpha )
Copy the code

Where alpha is set to transparency, the value is between 0 and 1. This method is available in all browsers except Internet Explorer 9:

In the same way, we can also use this method to make the whole background transparent, that is, write an extra div as modal layer to make transparent, you can obviously see that the above text is not transparent:

The above effect codes are as follows:

// html
<section>
  <div class="item-pic">
    <header class="header1"</h4> </header> </div> <div class="item-pic">
    <header class="header2"</h4> </header> </div> <div class="item-pic">
    <div class="handle-opacity"> <! </h4> </header> </div> </div> </section> <style lang="less"> .header1 { opacity: .6; }. Header2 {background-color: rgba(0, 0, 0, 0.45); } .handle-opacity { position: absolute; width: 100%; height: 100%; Background: rgba(255, 255, 255, 0.45); Header {background-color: rgba(0, 0, 0, 0.45); } } </style>Copy the code

1.3 Div has a built-in IMG element and always has spacing at the bottom

If you wrap a div around an IMG, the img doesn’t completely cover the div space and always leaves a gap at the bottom.

This occurs because img is an inline element and the browser is a downward character (e.g. G, y, j, p, q), these characters take up more space at the bottom than other characters (depending on the current font size). This rule affects the img tag (whose default vertical alignment is based on the baseline, vertical-align: Baseline), the same line elements and external elements leave the same safety distance. The image on the right shows the effect of adding text, which makes it all clear.

Now that we know this is mainly due to the downlink string protection mechanism and the fact that IMG is an inline element, the solution is as follows:

  1. divSet up thefont-size: 0orline-height: 0, and then the row height is 0;
  2. imgSet up theVertical-align: top or middle/So that it is no longer aligned with the default baseline;
  3. imgSet up thedisplay:block, making it a block-level element.

To sum up, I think method 3 is the best, while method 1 is not recommended.

1.4 Elements are automatically filled with background color

This scene is often seen in scenes such as form input. It is really strange to see it for the first time. The effect is shown in the figure below:

Chrome automatically fills the input field with a background (yellow or gray blue). This is because chrome automatically fills the input, SELECT, and Textarea fields with a private pseudo-attribute (-webkit-autofill). A better solution would be to do style overlays as follows:

input:-webkit-autofill{ box-shadow: 0 0 0px 1000px white inset ! important; } select:-webkit-autofill{ box-shadow: 0 0 0px 1000px white inset ! important; } textarea:-webkit-autofill{ box-shadow: 0 0 0px 1000px white inset ! important; }Copy the code

It’s a bad idea to disable autofill, but don’t do that…

1.5 Transform Cardinality value causes font blurring

As the proudest attribute of CSS3, transform has become an indispensable method in the current front-end development. However, it has a rendering problem, that is, when the element is set with transform, its value is a cardinal or decimal, and its overall height is also a cardinal, its internal text will become blurred, as shown in the figure:

After checking, the specific reason may be that the transform transform will create a painting layer on the browser and re-render it. During the rendering process, the surrounding text is also processed. If the text with odd height may have half pixel calculation. The browser optimizes the rendering of this half pixel, so the edges get blurred. The solution is:

  1. Do not set odd and small values to the transform property value;
  2. Adjust the overall element height not to base.

1.6: the last child and: – last – of – type

As a common CSS pseudo-class selector, :last-child is often used, but sometimes in extreme cases, it fails unexpectedly and confusingly, as shown in the following example: three IMG tags are wrapped around the card, and the current need is to make the last image border pink:

// html
<div class="card">
  <img 
    v-for="(item,i) in pics"
    :key="i"
    :src="item"
  />
</div>
// css
<style lang="less">
.card {
  > img {
      width: 150px;
      margin-right: 10px;
      &:last-child {
        border: 5px solid pink;
      }
   }
}
</style>
Copy the code

The same applies to last-of-type:

.card { > img { width: 150px; margin-right: 10px; &:last-of-type { border: 5px solid pink; }}}Copy the code

The effect is as follows:

Now add a span to img and find that last-child is invalid:

// html
<div class="card">
  <img 
    v-for="(item,i) in pics"
    :key="i"
    :src="item"/> <span>next is ... </span> </div> // css <style lang="less">
.card {
  > img {
      width: 150px;
      margin-right: 10px;
      &:last-child {
        border: 5px solid pink;
      }
   }
}
</style>
Copy the code

While: Last-of-type is still fine:

Now come to the conclusion:

  1. :last-childSelects the last element in a group of sibling elements, and the last element must be the specified element declared (note the two conditions);
  2. :last-of-typeSelects the last element of the specified type in a group of sibling elements.

For example, :last-of-type is more rigorous and less prone to accidental bugs, so I recommend it. The same applies to :nth-last-child(n) and: nth-last-type (n)

Second, the DOM

In this section, I’ll describe some of the overlooked problems with DOM manipulation.

2.1 IOS Date Display Problem

In the department IOS version (IOS5 and below), the parsing of string time format with “-” interval is not successful. For example, we wrote such a weak time format adapter:

function DateFormat(date) {
  if(! date)return null;
  date = new Date(date);
  let Y = date.getFullYear();
  letM = (date.getMonth() >= 0 && date.getMonth() <= 8) ? ` 0${date.getMonth() + 1}` : `${date.getMonth() + 1}`;
  letD = (date.getDate() >= 0 && date.getDate() <= 9) ? ` 0${date.getDate()}` : `${date.getDate()}`;
  return `Y-M-D`
}
Copy the code

If you pass “2019-12-31” to the iPhone in IOS5 or below, it will appear as NaN NaN NaN, while other IOS and Android versions are no problem.

To address the above problem, replace the event string separated by “-” with a “/”. For the same adapter, add a code:

function DateFormat(date) {
  if(! date)return null;
  if(typeof date === 'string' &&  date.indexOf('T')! =-1 && date.indexOf('+')! =-1) { date = date.replace(/-/g,'/').replace('T'.' ').substring(0,date.indexOf('. '))
  }
  date = new Date(date);
  let Y = date.getFullYear();
  letM = (date.getMonth() >= 0 && date.getMonth() <= 8) ? ` 0${date.getMonth() + 1}` : `${date.getMonth() + 1}`;
  letD = (date.getDate() >= 0 && date.getDate() <= 9) ? ` 0${date.getDate()}` : `${date.getDate()}`;
  return `Y-M-D`
}
Copy the code

2.2 ENTER to refresh the current page

This is a really weird problem. When performing ENTER submission on a form, if you open a new page to display the submission result, you will find that the current form page also refreshed, which is of course a bad experience. If there is only one input in the Form, the ENTER key automatically submits the Form and refreshes the page. The solution is to write a hidden tag near the input field so that there are two inputs. This avoids the default refresh bug as shown in the following example:

<form>
  <input 
    type="text" 
    v-model.trim="searchText" 
    placeholder="Search for content you are interested in"
    @keyup.enter="goSearch" 
  />
  <input 
    id="hidden" 
    type="text" 
    style="display:none" 
    @keyup.enter="goSearch"
  />
</form>
Copy the code

Finally, on the eve of the arrival of 2020, I published a more urgent article to end my journey of 2019. This article will be updated all the time, if you have different opinions and questions, please leave a comment, looking forward to your likes. I wish you good luck in 2020.