CSS debugging

Sometimes the problem with CSS is that it doesn’t look exactly the way you want it to. You might think that the selector matches the element but nothing happens, or you might think that the size of the box is not what you want. Then at this time you need debugging tools, specific debugging to see the actual problems of the page.

Review the CSS

You can select an element from the page by right-clicking the element and selecting The Inspect element; Select the element from the HTML tree to the left of the browser developer tool DevTools.

Element panel

Debug HTML and CSS using the Browser developer tool Element panel. In this panel, you can directly switch on and off, edit and add property values. Modify the font color as shown below:

Understanding box model

articleRelearn the basics of CSSHaving introduced the concept of a box model, let’s now open the developer tools to take a look at it to help you really understand the box model.

The Layout view shows you a diagram of the box model of the selected element, along with a description of the properties and values that change how the element is displayed. You may not have used the attributes of the element exactly, only the initial values, and the box model may contain descriptions of these attributes.The figure above shows the mainstream browsers, which default to the standard box model layout, the actual width/height of the box =width/height + padding + border.

To change to the IE box model, addbox-sizing: border-boxDiv is set to the actual width and height of the browserwidth/height, as shown in the figure:

2. CSS extensions

CSS pretreatment

Another way to organize CSS is to take advantage of tools available to front-end developers that allow you to write CSS in a slightly more stylized way. Preprocessing tools run from your original files and turn them into stylesheets. Representative tools include:

  • less
  • sass
  • stylus

Less, for example

The following uses less as an example to see what functions can be extended by the CSS. Variable, which will be filled in the corresponding position after compilation.

variable

Less uses variables, needless to say, to see the code at a glance:

Mixins hybrid

A Mixin is a method of including (or mixing) a set of attributes from one rule set into another.

More and more

For more information about the syntax of less, see lesscss.org/

3. CSS Innovation (for the future)

Front-end technology changes rapidly and we need to keep learning to update our front-end knowledge and apply it to our own projects. This time the focus is to sort out some of the future popular or today’s friends may have used CSS features, including CSS modern pseudo-class, CSS custom attributes, mixed mode, CSS in JS, scrolling features, SVG ICONS.

1. Modern pseudo-classes

:is() reduces repetition

You can use the :is() pseudo-class to remove duplicates from the list of selectors and reduce redundant duplicate code.

/* BEFORE */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

/* AFTER */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}
Copy the code

Note that many browsers support this functionality through an older, prefixed pseudo-class :any(), including older versions of Chrome, Firefox, and Safari.

/* background-compatible version :-*-any() */ :-webkit-any(header, main, footer) p:hover {color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; cursor: pointer; }Copy the code

:where() keeps particularity low

Use :where() to keep particularity low. Pseudo-class :where() is almost identical to :is() except for one key difference: it will _ always _ have zero specificity. This has an incredible impact on those who are building frameworks, themes, and designing systems. Using :where(), authors can set default values, and downstream developers can include overrides or extensions without specific conflicts.

The: Where () pseudo-class and any of its arguments do nothing to help the specificity of the selector, which is always zero

The following set ofimgStyle. use:where()Even with a higher specificity selector, the specificity is still zero. In the example below, what color do you think the border of the image will be?See the test code:testing :where()

: the not () the choice

The basic:not()Selectors are supported as of Internet Explorer 9. But the selector is enhanced:not()Allows it to accept a list of selectors, as in:is() 和:where().See the test code:testing :not()

:empty Selects the empty element

:empty, when an element _ has no child element _, it can match that element, including text nodes. Rule P: Empty will match

, but not

Hello

. One method you can use with :empty is to hide elements that might be placeholders for dynamic content filled with JavaScript. Maybe you have a div that will receive the search results, and when it is filled, it will have a border and some padding. But since you don’t have results yet, you don’t want it to take up space on the page. Use :empty to hide it. 

.search-results:empty {
  display: none;
}
Copy the code

:focus-visible sets the focus style

use:focus-visiblePseudo-classes are shown only when the user agent heuristically determines that the focus ring should be visible. In other words:The browser willDepending on the input method, element type, and context of interactiondecisionWhen to apply:focus-visible. For example, if we need to set the focus style for the text input field, we can use it as shown below:See the test code:testing :focus-visible

More pseudo-classes

Other more new pseudo class, interested partners can refer to MDN to learn.

2. CSS custom attributes

Custom attributes (sometimes referred to as CSS variables or cascading variables) are defined by CSS authors and contain values that can be reused throughout the document. Complex sites have a lot of CSS code and often have a lot of duplicate values. For example, the same color value can be used in hundreds or thousands of places, and if it changes, it needs to be searched globally and replaced one by one. This is where custom attributes come in handy. Use custom properties: tag set values (e.g. –theme-color: black;) Var () : var(–theme-color);

body {
  --theme-color: orange;
}
button {
  background-color: var(--theme-color);
}
.title {
  color: var(--theme-color);
}
.box {
  border: 2px solid var(--theme-color);
}
Copy the code

Standby value

What if the developer didn’t define the –theme-color variable? Var () can accept the second parameter as an alternate value, if the first parameter (custom attribute) is not in effect:

button {
  background-color: var(--theme-color, gray);
}
Copy the code

Note: If you want another custom property as the default, the syntax should be background-color: var(–theme-color, var(–fallback-color)).

3, CSS in JS

Previously we have learned to use CSS custom properties, in fact, you can also use JavaScript to operate custom properties, the interaction effect to do more cool and smart. Let’s implement the hover trace button effect and feel CSS in JS:

<! <div class="track-btn"> <span>Copy the code
/* css */
.track-btn {
  overflow: hidden;
  position: relative;
  border-radius: 25px;
  width: 400px;
  height: 50px;
  background-color: #66f;
  cursor: pointer;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
}
.track-btn span {
  position: relative;
  pointer-events: none;
}
.track-btn::before {
  --size: 0;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background-image: radial-gradient(circle closest-side, #09f, transparent);
  content: "";
  transform: translate3d(-50%, -50%, 0);
  transition: width 200ms ease, height 200ms ease;
}
.track-btn:hover::before {
  --size: 400px;
}
Copy the code
/ / js / / to monitor mouse events, dynamic change CSS custom attributes const BTN = document. The getElementsByClassName (" track - BTN ") [0]. const btnStyle = btn.style; btn.addEventListener("mousemove", e => { btnStyle.setProperty("--x", `${e.offsetX}px`); btnStyle.setProperty("--y", `${e.offsetY}px`); });Copy the code

As CSS has evolved over the years, we no longer need to write CSS files to write styles. For the Styled – Components CSS in JS scheme, use the power of JavaScript to arm CSS.

4. CSS Mixed mode

CSS3 has added an interesting feature called mix-blending-mode, which literally translates to blend mode. We can only use CSS to achieve the filter skin effect, mainly through the mix-blending-mode attribute, the specific code is as follows:

<! -- html --> <input type="color" value="#0000ff"> <img SRC = "https://images.unsplash.com/photo-1508974491678-7ec251d629fd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fG VufDB8fHx8&auto=format&fit=crop&w=1427&q=80">Copy the code
img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

input { 
    position: absolute;
    padding: 0;
    border: none; 
    width: 100%; 
    height: 100%;
    /* mix blend mode makes the color of the swatch alter the image behind it. */
    mix-blend-mode: hue; /* try screen, multiply or other blend modes for different effects */
    cursor: pointer;
}
Copy the code

5. Rolling behavior

When the content of the web page exceeds the viewable area, a scroll bar appears in the browser. There are many new CSS features for container scrolling, such as:

  • Customize the appearance of the scroll bar
  • scroll-behaviorSpecifies the container rolling behavior to make the rolling effect more silky
  • overscroll-behaviorOptimize the scrolling boundaries, especially the penetrations that help us scroll

Customize the appearance of the scroll bar

Default browser scrollbar style, available for Windows and MAC:

Window: MAC: In CSS, we can use pseudo elements to customize the appearance of scrollbars, mainly involving the following seven pseudo-elements:

  • ::-webkit-scrollbar– The entire scroll bar
  • ::-webkit-scrollbar-button— Button on scroll bar (up and down arrow)
  • ::-webkit-scrollbar-thumb– Scroll slider on the scroll bar
  • ::-webkit-scrollbar-track– Scroll bar track
  • ::-webkit-scrollbar-track-piece– Scroll bar track part without slider
  • ::-webkit-scrollbar-corner– The part where the vertical scroll bar and horizontal scroll bar meet
  • ::-webkit-resizer— Partial styles for corner sections of certain elements (e.g., draggable buttons for textarea)
html { min-height: 2284px; overflow-x: hidden; } html::-webkit-scrollbar { width: 12px; height: 8px; } /* Webkit-scrollbar-thumb {background-color: #0ae; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); } / / HTML ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 6px (0 00/30%); border-radius: 10px; background-color: #F5F5F5; }Copy the code

Specifies the container rolling behavior

When scrolling is triggered by manual navigation, the scroll behavior specifies the scroll behavior of a scroll box to make the scrolling more silky.

Scroll - behaviors: auto (rolling) immediately | smooth (stable rolling);Copy the code

Optimized rolling boundary

When multiple scroll Windows are nested, the outside dialog box contains scrollable content. Once you scroll to the edge of the dialog box, the content of the page below the dialog box also starts to scroll — this is called “scroll chain”. In some cases we don’t want these representations, we can use themoverscroll-behaviorTo remove unwanted scroll chains.

In an example, we present a full page list of imaginary contacts and a dialog box containing a chat window.

/* Messages {height: 220px; overflow: auto; overscroll-behavior-y: contain; } /* Body {margin: 0; overscroll-behavior: none; }Copy the code

6. SVG ICONS

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional Vector Graphics. Unlike traditional dot-matrix image modes like JPEG and PNG, the SVG format provides vector images, which means that images can be magnified infinitely without distortion or loss of quality, and can be easily modified. Another advantage of using SVG ICONS is that we can control the color of ICONS directly in THE CSS code:

<!-- HTML -->
<svg t="1631461658126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2487" width="200" height="200">
    <path d="M800.164 415.232c0-160.322-130.576-290.146-291.182-288.924-158.234 1.204-286.914 131.116-286.684 289.356 0.126 85.816 37.668 162.852 97.184 215.686 40.054 35.558 65.026 85.046 68.224 138.51l3.994 66.758h239.062l3.988-66.678c3.15-52.664 26.706-102.316 66.446-137.02 60.648-52.962 98.968-130.846 98.968-217.688z" fill="#FFC751" p-id="2488"></path><path d="M800.17 415.224c0 86.858-38.322 164.738-98.968 217.696-39.742 34.71-63.3 84.35-66.452 137.014l-3.982 66.692H391.692l-3.982-66.764c-3.134-52.11-26.912-100.442-65.216-135.778a295.974 295.974 0 0 0 75.134 9.64c163.244 0 295.594-132.35 295.594-295.594 0-79.042-31.024-150.838-81.548-203.89 110.064 40.808 188.496 146.744 188.496 270.984z" fill="#FFAF40" p-id="2489"></path>
    <path d="M681.978 652.33c-28.092 32.664-44.626 74.102-47.226 117.604l-3.982 66.692H391.692l-3.982-66.764a196.862 196.862 0 0 0-14.396-62.894c32.718 10.95 67.724 16.866 104.11 16.866 77.346-0.002 148.444-26.75 204.554-71.504z" fill="#FF993A" p-id="2490"></path>
    <path d="M511.232 944.774m-79.226 0a79.226 79.226 0 1 0 158.452 0 79.226 79.226 0 1 0-158.452 0Z" fill="#B5B1A4" p-id="2491"></path>
    <path d="M590.454 944.77c0 43.758-35.466 79.222-79.222 79.222-24.784 0-46.886-11.366-61.416-29.19a79.114 79.114 0 0 0 39.296 10.402c43.758 0 79.222-35.466 79.222-79.222a78.944 78.944 0 0 0-17.732-49.976c23.822 13.66 39.852 39.332 39.852 68.764z" fill="#8F8B81" p-id="2492"></path>
    <path d="M579.452 971.714h-136.442c-39.944 0-72.324-32.38-72.324-72.324v-109.528a18.08 18.08 0 0 1 18.08-18.08h244.928a18.08 18.08 0 0 1 18.08 18.08v109.528c0.002 39.944-32.378 72.324-72.322 72.324z" fill="#8F8B81" p-id="2493"></path>
    <path d="M370.686 841.678h281.09v54.78H370.686z" fill="#706C64" p-id="2494"></path>
    <path d="M651.784 789.858v109.53c0 39.944-32.388 72.332-72.332 72.332h-136.442a72.9 72.9 0 0 1-6.36-0.276c0.866 0.036 1.732 0.036 2.6 0.036 88.792 0 160.774-71.982 160.774-160.774 0-13.42-1.64-26.47-4.756-38.932h38.434c9.972 0.002 18.082 8.094 18.082 18.084z" fill="#706C64" p-id="2495"></path>
    <path d="M645.668 868.03H376.794a18.08 18.08 0 0 1-18.08-18.08v-22.478a18.08 18.08 0 0 1 18.08-18.08h268.874a18.08 18.08 0 0 1 18.08 18.08v22.478a18.08 18.08 0 0 1-18.08 18.08z" fill="#B5B1A4" p-id="2496"></path>
    <path d="M559.662 809.39h-141.106c-16.192 0-29.32 13.128-29.32 29.32s13.128 29.32 29.32 29.32h141.106c16.192 0 29.32-13.128 29.32-29.32s-13.126-29.32-29.32-29.32z" fill="#D8D4C9" p-id="2497"></path>
    <path d="M489.964 809.39h-32.214c-16.192 0-29.32 13.128-29.32 29.32s13.128 29.32 29.32 29.32h32.214c16.192 0 29.32-13.128 29.32-29.32s-13.128-29.32-29.32-29.32z" fill="#E8E4D8" p-id="2498"></path>
    <path d="M330.148 568.842c16.37-14.21 20.47-37.976 9.804-56.848a196.752 196.752 0 0 1-25.496-96.458c-0.128-93.48 65.648-172.33 153.37-192.224 20.98-4.758 35.868-23.406 35.868-44.918 0-29.422-27.246-51.508-55.944-45.018-128.896 29.154-225.652 145.054-225.46 282.29 0.078 51.682 13.74 100.18 37.596 142.126 14.204 24.974 47.866 30.488 69.564 11.654z" fill="#FFE059" p-id="2499"></path>
    <path d="M381.774 157.122c-76.14 38.454-133.168 109.634-152.406 194.69-6.448 28.51 15.254 55.638 44.484 55.638h0.99c21.43 0 39.764-14.97 44.536-35.862 13.204-57.806 52.012-106.12 103.798-132.212 19.836-9.994 29.512-32.836 23.012-54.076l-0.27-0.882c-8.252-27.024-38.922-40.034-64.144-27.296z" fill="#FFF370" p-id="2500"></path>
    <path d="M346.71 307.668a198.7 198.7 0 0 1 29.194-34.956c15.342-14.586 18.588-37.808 7.394-55.776l-0.486-0.782c-15.606-25.05-50.324-29.356-71.59-8.892a292.152 292.152 0 0 0-40.862 48.978c-14.148 21.322-7.896 50.308 13.536 64.29l0.786 0.512c20.742 13.538 48.438 7.332 62.028-13.374z" fill="#FFF7C7" p-id="2501"></path>
    <path d="M898.472 347.924h-34.656c-17.42 0-31.544 14.122-31.544 31.544 0 17.42 14.122 31.544 31.544 31.544h34.656c17.42 0 31.544-14.122 31.544-31.544s-14.124-31.544-31.544-31.544zM125.528 411.732h34.656c17.42 0 31.544-14.122 31.544-31.544 0-17.42-14.122-31.544-31.544-31.544H125.528c-17.42 0-31.544 14.122-31.544 31.544 0 17.42 14.124 31.544 31.544 31.544zM823.982 174.872L793.968 192.2c-15.086 8.71-20.256 28.002-11.546 43.088 8.71 15.086 28.002 20.256 43.088 11.546l30.014-17.328c15.086-8.71 20.256-28.002 11.546-43.088-8.71-15.086-28.002-20.256-43.088-11.546zM680.788 61.4l-17.328 30.014c-8.71 15.086-3.542 34.378 11.546 43.088 15.086 8.71 34.378 3.542 43.088-11.546l17.328-30.014c8.71-15.086 3.542-34.378-11.546-43.088-15.086-8.71-34.378-3.542-43.088 11.546zM480.096 31.544V66.2c0 17.42 14.122 31.544 31.544 31.544 17.42 0 31.544-14.122 31.544-31.544V31.544C543.182 14.122 529.06 0 511.64 0c-17.422 0-31.544 14.122-31.544 31.544zM287.952 93.304l17.328 30.014c8.71 15.086 28.002 20.256 43.088 11.546 15.086-8.71 20.256-28.002 11.546-43.088l-17.328-30.014c-8.71-15.086-28.002-20.256-43.088-11.546-15.088 8.71-20.256 28-11.546 43.088z" fill="#79FF79" p-id="2502"></path>
    <path d="M168.114 230.132l30.014 17.328c15.086 8.71 34.378 3.542 43.088-11.546 8.71-15.086 3.542-34.378-11.546-43.088l-30.014-17.328c-15.086-8.71-34.378-3.542-43.088 11.546-8.71 15.086-3.54 34.378 11.546 43.088z" fill="#79FF79" p-id="2503"></path>
</svg>
Copy the code
svg {
  stroke: #c2c2c2;
  width: 64px;
}
Copy the code

Four,

The above is an introduction to the great features of CSS innovation, but there are many new things to learn and explore. We should learn and use in time to achieve excellence in the project.

reference

Guide to newly supported modern CSS pseudo-class selectors Every front-end needs to know about these futuristic CSS technologies

Review past

[Youth Camp] – Relearn the basics of CSS