Overview
The last article mainly explained the part of setting CSS in the Elements panel. Today I will continue to explain CSS-related functions, including the small toolbar above the Styles tab and the application of the Computed tab.
When reading this article, it is recommended to use this demo page Elements-CSS 2 together for better results.
State lock
Sometimes Pseudo classes such as :hover and :active are defined in CSS to change the style when the user interacts with the page. However, the Styles defined in the Pseudo class cannot be triggered directly by JavaScript during Debug. It will only appear if there is a mouse passing by. The menu must be locked in the hover state to be able to observe the changes while adjusting the style, otherwise the menu will disappear when you want to adjust the style in DevTools.
The simplest way to lock is to inspect the element first, right-click the element to see the Force state, and then select the state you want to lock, such as hober, and the drop-down menu will appear.
A small circle will appear on the left side of the locked element as a reminder, but in fact, there is a :hov button at the top of the Styles tab. Clicking it will expand the state switching list. This is also the method I use more often. You can quickly switch through this list. Kind of state.
Class operation
Click on the .cls button : The .cls on the right of hov will expand the Class switching list. You can switch each Class through the list. You can also add a new class from the Add new class input box. The most special thing is that a drop-down menu will appear when you enter it. You can directly search for the Class defined on this page, and use the arrow keys to preview the effect of adding the Class.
If readers have used atomic CSS such as TailwindCSS, they will find them very easy to use with .cls, quickly switching, adding, and previewing various classes.
Here we use the previously developed PDF Editor to demonstrate, just use TailwindCSS.
Added Style Rule
The + sign on the far right is used to add a rule. By default, a CSS Selector that can select the currently selected element will be generated. You can edit the rule and write a temporary CSS file, so as to avoid modifying the existing CSS rules or modify the Inline style. In addition, if you press and hold down, a drop-down menu will appear, allowing you to select which CSS file the new rule will be written into.
After creating the rule, click the source on the right to edit the newly added rule. This example automatically generates a CSS Selector and adds a rule to style.css.
Strikethrough
If there is a strikethrough on a bar, it means it is not effective, it may be overwritten by a higher priority Style or an illegal value has been entered (there will be an exclamation mark on the left).
In addition, the rule list of Styles pagination is actually sorted by priority from top to bottom. The same CSS property appears in the rule with the highest priority to take effect. However, adding !imporant will surpass the rule without !improtant, the same The CSS selector is the later the higher the priority.
Computed
When there are many rules, it is difficult to see the actual value of a Property from the Styles tab. At this time, you must rely on the Computed tab to query the actual value. Expand the Property to see all the rules and file sources, as well as the overridden strikethrough.
Note that using short-hand (short-hand) such as background: #ff2525; is to define various background-related properties at once, such as background-image, background-size, etc. The background itself does not appear in the Computed tab.
Search
Some properties are hidden, check Show all to see all, and then use Filter to quickly find the property.
Rendered Fonts
When you encounter font problems, you can find at the bottom of the Computed panel what font is used for the font in an element, its source, and how many words are in the Render.
This element Render has 13 Tahoma fonts
In addition, in the Inspect element, you can see a lot of useful information such as font, Box model, Contrast ratio, etc. When I quickly browse the font size, I will directly look at the Inspect information box.
Conclusion
Today, I have finished explaining the CSS-related functions in the Elements panel. Tomorrow, I will continue to explain the DOM-related functions.