Reading makes me happy. – Ha ha

I recently read Zhang Xinxu’s new book “CSS World” and gained a lot of strange techniques and deep understanding of CSS

It is also personal in the company to share part of the content of the chapter, so by the way, I will share the content of the first to everyone, when you buy the book, too busy to take into account the embarrassment of watching it!

The last three chapters of the book are

  • Show and hide elements
  • User interface style
  • Change of flow

Now I’ll dive right into the subject and begin a non-systematic sharing of each chapter

Show and hide elements

There are many ways to make elements invisible with CSS, including clipping, positioning out of the screen, and transparency changes. Although they are invisible to the naked eye, but behind the differences in multiple dimensions

Here are some of the best hidden practices to use in your development scenario

Good hiding practices

  • Does not take up space, does not render using script 
    <script type="text/html"> <! <img SRC = "<img SRC ="1.jpg"/ > <! < span style= "color: RGB (51, 51, 51)"display: none;">
        <img src="2.png" />
    </textarea>
</script>
Copy the code
  • Does not take up space, resources can be loaded, and DOM can be accessed using display: None 
    <div id="box"</div> <script>let oBox = document.getElementById('box');
        console.log(oBox);  // <div id="box"</div> </script>Copy the code
  • It doesn’t take up any space. It has a transition effect when hidden 
    .hidden {
    position: absolute;
    visibility: hidden;
}

<div class="div hidden"< div style = "box-sizing: border-box! Important; word-wrap: break-word! Important;Copy the code
  • To occupy space, do not click Visibility: hidden 
    .vh {
    visibility: hidden;
}
Copy the code
  • It does not take up space and cannot be clicked. The keyboard can access clip cutting 
    .out {
    position: relative;
    left: -999em;
}
.clip {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

<div class="clip">
    <div class="out"</div> </div>Copy the code
  • Take up space, can’t click, the keyboard can access relative 
    <div style="position: relative; top: -999em;""> </div>Copy the code
  • Opacity: click on opacity 
    <div style="opacity: 0; filter: alpha(opacity=0);"> Transparency </div>Copy the code
  • Hide text using text-indent 
    <p style="text-indent: -999999px;"< p> < p>Copy the code

Choose the appropriate hiding method based on the actual hiding scenario, and read on

Display and implicit elements

We know that if display is None, the element and all its descendants are hidden, whereas if it is not None, it is displayed

Display can be said to be a hidden way with the highest frequency in web explicit and implicit interaction. It is hidden in the real sense, clean and without leaving any traces

None is unclickable, unreachable using assistive devices like screen readers, and doesn’t take up space

Me: I have wine, so don’t say you don’t have a story

I know. Display: None. You’re not a schoolgirl without a story

The background-image of the display: None element loads differently depending on the browser

  1. In Firefox, background-image images of display: None are not loaded, including the parent element display: None

  2. In Chrome and Safari, the image load is affected by whether or not the parent element is None, with display: None, and the image is not loaded.

    The parent element does not have display: None, and if it has a background element, it will be loaded as well

  3. In Internet Explorer, no matter what will request image resources, is so capricious

Therefore, in the actual development of the time, such as the head of the wheel broadcast switching effect

Images that need to be hidden by default are hidden as background images on children of the display: None element. This small change can significantly improve the loading experience of the page and is a very useful trick

whatever

The above is interesting, but in reality it is not all background images to load image resources

There is another good friend, img element, but it does not have any use is that it says a lot of loading or not loading situations, img does not have any use, people do not care about you none or none, still with the spirit of the brave to enter the world to request resources

Live long to see

They say display: None is the purest, cleanest thing that can’t be clicked or touched, but what the hell is this?

Explain yourself. We are civilized men who would never use force!

<form action="/index.php">
    <input type="submit" id="hi" style="display: none;">
    <label for="hi"> Submit </label> </form>Copy the code

Hidden buttons trigger click, triggering form submission, in modern browsers (IE9+, modern standard browsers)

So what’s the point of adding display: None if you have this exception?

  • Meaning: Clicking on the label element does not trigger anchor positioning when the button and label element are not horizontal
  • But: The authors do not recommend this because the Submit button loses keyboard accessibility

A lot of it is all natural

There are many tags and attributes in HTML that come naturally with display: None

  • Tags: style, script, dialog
  • Properties: 
    <input type="hidden" name="id" value="1"/> // is specifically used to place hidden information such as tokens or ids. Therefore, the implicit nature of form elements does not affect the submission of dataCopy the code
  • New in HTML5hiddenThis Boolean property allows elements to be inherently hidden 
    [hidden] {display: none; }Copy the code
  • For ol ordered lists, if one of the child elements li is set to display: None, then the total number of elements with 10 phases will be counted as nine, and the element with display: None will be replaced by its sibling
  • Display: None does not affect the implementation of the CSS3 animation, but only the transition effect. Therefore, transition and visibility have a better relationship.

Since we are talking about visibility, let’s invite visibility to shine

Visibility and the visibility of elements

Visibility is not just about keeping space

Lots to watch for:

  1. Inheritance (one of the most interesting features, not mine)
    • The parent element sets visibility:hidden, and the child element inherits the property and is also invisible
    • The essential difference is that when the parent element is set to hidden and the child element is set to visible, the child element is visible
    • At this point the parent element sets display: None and the child element is never seen
    <ul style="visibility: hidden;">
    <li style="visibility: visible;">1</li>
    <li>2</li>
    <li>3</li>
    <li style="visibility: visible;">4</li>
</ul>
Copy the code

Visibility: Hidden Makes the element invisible, but does not affect its count and will not recalculate the result

The “visibility: Hidden” element is used to display the transition effect

This is because transition supports a CSS property called visibility, but not display

  1. With JS

Visibility: Hidden is friendly to JS as well as transition

In real development, the size and location of hidden elements need to be obtained to achieve the interaction of precise layout positioning

In this case, use visibility:hidden

.hidden {
    position: absolute;
    visibility: hidden;
}
let ele = document.getElementById('demo');

console.log('clientWidth: ' + ele.clientWidth);
console.log('clientHeight: ' + ele.clientHeight);
console.log('left: ' + ele.clientLeft);
console.log('top ' + ele.clientTop);
console.dir(ele.getBoundingClientRect());
Copy the code

Well, that’s the end of the story. Let’s start a new journey, haha

User interface style

User interface styles refer to the CSS styles used in the CSS world to help users interact with interfaces. These include properties such as Outline and CURSOR

Outline property similar to border

Outline represents the outline of an element, with the same syntax as border, divided into width, type, and color

.outline {
    height: 60px;
    width: 60px;
    outline: 2px dashed #0c9;
}
Copy the code

The style is the same, but the original intention of the design is not quite the same, which can be judged by the sun and the moon

Outline is a user experience property that is closely related to focus state and keyboard access

For buttons or links, the usual keyboard action is to either focus control elements (links, buttons, input fields, etc.) in order by pressing the Tab key, or focus the normal elements of a tabIndex, and then press Shift+Tab to access them in reverse

Here we go!

By default, for elements in the focus state, the browser will distinguish and prompt them in the form of glowing or virtual boxes. This is a friendly user experience and is necessary, otherwise it will be difficult for users to know which element they are currently focusing on and they will lose themselves

If the element focuses on the A link, press enter to jump to the corresponding link. The above interaction is all based on keyboard access, which is why outline and keyboard access are so close

Unprofessional behavior

In many cases, it is not advisable to write the following form in the reset style

* { outline: 0 none; }
或
a { outline: 0 none; }
Copy the code

It’s not a good idea to shoot a bunch of ducks in a row. More often than not, the browser’s built-in focus doesn’t match the design style and needs to be reset and use a special class name

.input {outline: 0; } // However, you must add the focus state style to.input:focus {border-color: Highlight}.Copy the code

Outline: 0 none;

This operation will cause the user can not find the current focus when accessing the keyboard, easy to produce confusion, for the sake of everyone, convergence

Here’s a quick note: In real development, sometimes you need to give a generic element the outline effect instead of a form control element

For example, the Submit button is cumbersome to do UI design, so use the label element and associate these native form controls with the for attribute

[type="submit"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
.btn {
    display: inline-block;
    padding: 2px 12px;
    background-color: #19b955;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
:focus + label.btn {
    outline: 1px dashed hotpink;
    outline: 3px auto -webkit-focus-ring-color;
}

<div class="panel">
    <input type="submit" id="box">
    <label for="box" class="btn"> Submit </label> </div>Copy the code

Real non-space occupied outline and its application

Outline is a property that really doesn’t take up any space, Amazing

Rectangular hollowing effect of cutting head

Let’s take a look at the renderings

The core CSS is.crop {overflow: hidden; } .crop .crop-area { width: 80px; height: 80px; outline: 256px solid# 000;
    outline: 256px solid rgba(0, 0, 0, .5);
    background: url(about:blank);
    background: linear-gradient(to top, transparent, transparent);
    filter: alpha(opacity=50);
    cursor: move;
}
:root .crop-area {
    filter: none;
}
Copy the code

Use a large outline to create a translucent black mask around it, because no matter how large the outline is, it will not take up space and affect the layout. For the parts beyond, simply set overflow: Hidden to the parent element. Note:

  • Considering that IE8 does not support RGBA, the opacity is set to half effect with filter above
  • However, since IE9 supports RGBA, it is reset with :root instead of filter
  • In addition, IE10 has a click penetration problem for hollow elements, so it can be solved by setting invisible background content for background

Application tips for automatically filling up the remaining screen space

In the development of many times, due to the page content is not enough, resulting in the footer at the bottom of the awkward remaining space, there are often many solutions, we still use the outline function to perfect the implementation

The key CSS is to set an outline property with a large outline range, such as 9999px, to ensure that the outline color is covered no matter how high the screen is

It is worth noting that the orientation of outline cannot be specified because it is directly distributed around, so it needs to be processed with clip clipping, with the left and top edges as the clipping

.footer {
    height: 50px;
}
.footer > p {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    padding: 15px 0;
    background-color: #00a1f5;
    outline: 9999px solid #00a1f5;
    color: #fff;
    clip: rect(0, 9999px, 9999px, 0);
}

<div class="footer"> <p> Yes, I am footer</p> </div>Copy the code

The cursor attributes

We are really the most familiar strangers ah

Why do we say this because we only use pointer(hand shape), move(move), default(system default) etc

In the world of cursor, much more than we imagined, the following according to the functional characteristics to classify them

A variety of cursor property values

☆ friendship is not friendship tips:

  • conventional
    • cursor: auto; The default value
      • The input box is cursor: text
      • Href links are represented as cursor: pointer
      • Button represents cursor: default (default arrow)
    • A cursor: being the default; System default cursor
      • A short story from the Myth:
        • With native browser button styles compatible aspects not perfect, especially in IE s, black box, high width inconsistent problems emerge in endlessly, so everyone will use a label to simulate a button, everytime they hover up will have a hand type effect, eliminate the extra added, so over time to become the industry the established practice
    • cursor: none; This hides the cursor
      • what? Good? Its function in watching video, after full screen mouse motionless 3 seconds, set hidden cursor effect
      • IE8 does not support this and requires custom cursors
      Cur-none {cursor: url(transparent. Cur), auto; } :root .cur-none { // IE9+ cursor: none }Copy the code
  • Links and status
    • A cursor: being pointer; Hand shape
    • cursor: help; Help the cursor
      • Use the question mark icon for help links or prompts
      • However, it is rarely seen on web pages, and is more commonly used for cursor:pointer hand processing
    • cursor: progress; ongoing
      • One application scenario is when the web page loads JS. When the network is not good, the loading time of JS is too long
      body { cursor: progress; }, // Set cursor to auto when js is loaded; / / increases the user experience document. AddEventListener ('DOMContentLoaded', () => {
    document.body.style.cursor = 'auto';
});
Copy the code
    • cursor: wait;
      • A useless cursor that looks like an hourglass
    • cursor: context-menu;
      • Context menu, compatibility is very complex, petrol barrel shape, not very useful
  • choose
    • A cursor: being the text; Text can be selected
      • Input Default cursor representation is CURSOR :text
        • If disabled is set, the cursor automatically changes to CURSOR :default
      • If you set user-select: None in modern browsers that do not allow text selection, change the cursor to CURSOR :default
      p { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; cursor: default; } <p> cursor:default </pCopy the code
    • cursor: vertical-text;
      • Vertical selection, text layout is vertical situation, almost no opportunity to use
    • cursor: crosshair;
      • Cross cursor, it is suitable for the color tool in the scene, usually not used
    • cursor: cell;
      • Cell cursor, suitable for the development of similar Excel spreadsheet web pages
      • And IE8 also does not support, need to customize, is no chance to show
  • Drag and drop
    • Nurture ccursor: move;
      • Move the cursor to indicate that the current element is removable
      • Common popover components add cursor: Move to the title bar to let the user know that it can be dragged
    • cursor: copy;
      • Copy cursor: indicates that the current element can be copied. Internet Explorer 8 does not support this function and requires customization
    • cursor: alias;
      • Alias cursor, which indicates that an alias or shortcut can be created for the current element
    • Cursor: no-drop and cursor: not-allowed;
      • The style is the same, both indicate forbidden
      • It is worth noting:
        • Do not add cursor: not-allowed to the disable button
        • Because its state is only related to the drag behavior
        • So it’s better to use Default to disable the button cursor
  • Are allCSS 3 newCursor type of
    • The zoom
      • cursor: zoom-in; amplification
      • cursor: zoom-out; narrow
    • grab
      • cursor: grab; A hand with five open fingers
      • cursor: grabbing; Hands with folded fingers
      • Chrome also requires the -webkit prefix to take effect
      • Here, QQ Music PC side has made such cursor processing, as shown in the box selected position
  • Custom cursor
    • If you encounter some cursor types that are not supported by IE8, you can customize them to achieve compatibility
    • Browsers like Chrome can use a PNG image as a cursor
    • IE doesn’t work, it still has to use the special. Cur format
    • The most important function of the custom cursor is to customize the cursor style according to business requirements
    • But we don’t really use much anymore

That’s it for the user interface style, and the last chapter of the cold knowledge, you don’t want to go, look, look, look

Change of flow

It may surprise you, but direction can change the direction of the horizontal flow, even though few people know about it or have used it

And the attribute is simple and good to remember, less value, compatible with excellent IE6 support, can be mined for its magical effect

direction

Only two values:

  • direction: ltr; The default value
    • LTR -> left-to-right(left to right)
    • East Asian, European and American writing all belong to LTR mode
  • direction: rtl;
    • RTL -> right-to-left(right-to-left)
    • The writing of Arabic and Hebrew belongs to RTL mode

Of course, you might think that all of this doesn’t really matter, because big tricks aren’t easy to use, and the only thing that really matters is when you change the layout of your page. Right

The direction attribute has a default feature

Can change the replacement elements (img, input, textarea, select) or inline – block/inline – presentation sequence table element levels

For example: reverse the order

<div class="box" dir="rtl"> <p> I was number two </p> <p> I was number one </p> </div> <p dir="rtl">
    <img src=".. /1.jpg" alt="Cat">
    <img src=".. /2.png" alt="Dog">
</p>
Copy the code

For example, when making popover components, the confirm and cancel buttons are sometimes displayed in different locations depending on the user’s behavior

Let’s take a look at how this feature manifests in real development

What Windows users see:

What MAC users see:

writing-mode

It’s a shame that the writing-mode feature, which changes the CSS world’s horizontal and horizontal rules, has not been discovered and widely used

What writing-mode does and what attribute values you really need to care about

The writing-mode can be changed to a vertical flow, as shown below

IE
CSS3

CSS 3 grammar:

writing-mode: horizontal-tb; The default text stream is horizontal writing-mode: vertical-rl; The text is vertical, the reading order is from right to left (ancient poetry order) Text vertical, reading order from left to right (horizontal to vertical display)Copy the code

IE grammar:

Ms-writing-mode: lr-tb; ms-writing-mode: lr-tb; The initial lR-tb corresponds to the horizontal-tB-ms-writing-mode in THE CSS3 syntax: tB-rl; Tb-rl = vertical-rl-ms-writing-mode = tB-lr; tB-rl = vertical-rl-ms-writing-mode = tB-lr; Tb-lr is vertical-LR in the CSS3 syntaxCopy the code

Here’s how to compile a writing-mode for the combat version

writing-mode: lr-tb | tb-rl | tb-lr (IE8+)
writing-mode: horizontal-tb | vertical-rl | vertical-lr;
Copy the code

For vertical typography, actual development is rarely encountered, but a word about the changes that writing-mode brings

Horizontal can also margin merge

We all know that vertical margins of two adjacent elements will merge, and when elements become vertical flows, horizontal margins will merge as well

.vertical-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

<div class="div vertical-mode">
    <div class="list" style="margin-left: 20px;">one</div>
    <div class="list" style="margin-right: 50px;">two</div>
</div>
Copy the code

Normal block elements can be centered vertically using Margin: Auto

img {
    display: block;
    margin: auto 0;
}

<div class="box vertical-mode">
    <img src=".. /1.jpg" alt="">
</div>
<div class="box vertical-mode" style="text-align: -center; background: gray;">
    <div class="demo"> </div> <! -- <img src=".. /2.png" alt=""> -->
</div>
Copy the code

Above is the image element and ordinary block element implementation of vertical center code, seeing is believing

Text-align :center

<div class="box vertical-mode" style="text-align: center;">
    <img src=".. /2.png" alt="">
</div>
Copy the code

Use text-indent for text sinking

The core of CSS

.btn:active {
    text-indent: 2px;
}
<a href="javascript:;" class="btn vertical-mode"> get < / a >Copy the code

This kind of text sinking effect only works with Chinese, because Chinese does not rotate when typesetting vertically

And it only works with one word

Implement fully compatible Icon Fonts icon rotation effect

In old IE, it was difficult to rotate small ICONS. When writing-mode turned documents into vertical streams, English, numbers, and character numbers naturally rotated 90°

@font-face is compatible with IE5.5, so even IE6 and IE7 are fine

<span class="icon-play vertical-mode"< span style = "max-width: 100%; clear: both; min-height: 1em;Copy the code

Just a quick word

Here’s a personal summary:

CSS has a lot of quirks, and some of its features may have been designed for typography only

But we can use the properties they bring to our creativity to achieve many other unexpected effects, so all of the above, although a lot of it is a bit of a crafty process for women and children

But it also gives us some amazing tricks to learn from the development process

Thank you for watching, goodbye, ha ha