Shulou(Shulou.com)06/01 Report--

This article mainly introduces the tips to quickly improve the development of CSS skills, the article is very detailed, has a certain reference value, interested friends must read it!

Flexbox content wrapping

When we use a flexbox layout, this may happen by default when the container is not wide enough.

This is mainly because the default value of flex-wrap is nowrap, so we need to change the value like this.

. options-list {display: flex; flex-wrap: wrap;}

Spacing

In the design draft provided by the designer, it is easy to ignore the spacing between the text and other elements in the limit case, and it may eventually happen that the text is close to the icon.

To deal with this situation, you need to consider whether it is in the text or icon section, and choose to add margin value to increase the spacing after analysis according to the actual situation.

.section _ title {margin-right: 1rem;}

However, in this case, I usually consider adding margin-left to icon, so that when there is no icon, the text can still reach the edge of the container.

Long text content

This is simple, that is, the text is too long to deal with, in general, is to wrap or truncate and have. In the form of. The choice of method depends on the design style of the current page module.

The treatment method in this paper is to truncate out. This.

.username {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

The situation to prevent an image from being stretched or compressed is usually caused by the fact that the picture is uploaded by the user or that the picture is not used in the prescribed proportion.

The way to handle this is to use the object-fit attribute directly:

.card _ _ thumb {object-fit: cover;} Lock the scroll link

The main situation is when the page clicks to pop up the modal pop-up layer, and the content of the page itself is very long.

.modal _ _ content {overscroll-behavior-y: contain; overflow-y: auto;}

Although overscroll-behavior is good, there are big compatibility problems at present.

CSS variable fallback

This CSS variable fallback, to put it bluntly, is to use a "safe value" when the CSS variable value is invalid to ensure that a property value is still available.

.message _ bubble {max-width: calc (100%-var (--actions-width, 70px));}

However, combined with the previous handling of writing front-end pages, you may also consider the browser's compatibility with var (), and an attribute will be added. However, from the point of view of today's browsers, it seems that universality does not exist this problem.

.message _ bubble {max-width: 70px; max-width: var (--actions-width, 70px);} use fixed width or height

There is nothing to say about this, but it is mainly a protective measure when the content is too long and overflows the container. For example, when we set the height to 350px, the content will overflow if it is too long.

If we replace height with min-height, the situation will be different.

By the same token, the same is true of width.

Ignored background-repeat

When using a background image, if you do not add no-repeat, the background image will be flattened by default.

So, it's a good habit to add no-repeat easily, unless you already know whether the background image should be tiled or not.

. background-image: url ('..'); background-repeat: no-repeat;}

Vertical media query this scene has not been seen in the page, generally in the middle and background pages appear more probability, such as the page effect provided by the author.

The lower left corner is positioned through position: sticky;, probably through fixed positioning, and then when the height of the browser becomes smaller, it will be stacked on top of the navigation on the left.

Obviously, this kind of page effect is not right. If at this time, the height of the page is judged by @ media, outside a certain safety zone, we will let the lower left corner be located through sticky.

@ media (min-height: 600px) {.aside _ _ secondary {position: sticky; bottom: 0;}} use justify-content: space-between

The title of this part of the original text is Using Justify-Content: Space-Between, but it looks more like Using gap. What title to use is not the key, but this section mainly mentions that when using justify-content: space-between;, if there are not enough elements, the spacing between elements will be lengthened, because the spacing between elements will be evenly distributed.

For example, if you originally want such an effect, the value of the spacing is fixed:

When the number of elements is sufficient, the spacing between elements is ideal, through the following CSS processing:

.wrapper {display: flex; flex-wrap: wrap; justify-content: space-between;}

However, this is always the case when the number of elements is always insufficient.

It can be seen that, in fact, we do not want to distribute evenly, but just want the spacing between elements to be controllable at the maximum limit and when the content is insufficient. Generally speaking, there are many ways to deal with this, and it can be handled with things like margin, but there is currently a gap that is not very compatible that can solve this problem perfectly.

.wrapper {display: flex; flex-wrap: wrap; gap: 1rem;}

Text on the picture is a detail handling problem in the user experience. If there is a copy on the picture, but the picture is not loaded, or when the loading fails, add a background color to ensure that if the picture fails to load, the text can be distinguished from the background.

Use fixed values in CSS grid to note that grid grid layout is now slowly being concerned, grid and flex can do the same adaptive effect, you can also use fixed values. When using a fixed value, it is best to use @ media to determine the width in order to meet the minimum width.

@ media (min-width: 600px) {.wrapper {display: grid; grid-template-columns: 250px 1Frr; gap: 1rem;}}

However, in general, it is possible to change the layout of the page directly, which makes it unnecessary for the author to worry about it. Or mainly because he has never encountered the scene he encountered.

Show scroll bars only when needed

There is nothing to say about this. Generally speaking, people set scroll to auto. In a few cases, however, the auto may make the width of the element smaller, resulting in a small flaw in the content or layout.

.element {overflow-y: auto;} scroll bar binding line

This so-called bookbinding line is mainly the scrollbar-gutter property, which reserves the space for the scroll bar. As mentioned in the above overflow example, if it is set to auto, it may cause unexpected situations in the page layout, so scrollbar-gutter can handle this problem.

Compatibility is still an inevitable topic.

Assuming that compatibility is not taken into account, we can use this method to reserve space for the scroll bar.

.element {scrollbar-gutter: stable;}

Minimum content size in CSS flexbox

When using a flex layout, it is quite possible that the text content of one of the item is so long that it eventually overflows outside the container without a line break.

This situation is not impossible, even using overflow-wrap: break-word; will not work, so you need to add min-width: 0; to deal with it at this time.

.card _ title {overflow-wrap: break-word; min-width: 0;}

Minimum content size in CSS Grid

Similar to flexbox, the children of the CSS grid have a default minimum content size, auto, which means that if there is an element larger than the grid item, it will overflow.

@ media (min-width: 1020px) {.wrapper {display: grid; grid-template-columns: 1fr 248px; grid-gap: 40px;} .carousel {display: flex; overflow-x: auto;}

For the grid, the understanding is not deep enough, the direct extension of the author means to change the value of grid-template-columns to: minmax (0, 1fr) 248px can get the following effect.

Automatic fitting and automatic filling

When I saw the rendering at that time, I thought it was the case in the flex layout, but the result was the case used in the grid grid layout.

When using a grid layout, if you write it this way, using auto-fit, it will be the same effect as above, and it will be elongated when there is not enough item.

Display: grid; grid-template-columns: repeat (auto-fit, minmax (250px, 1fr)); grid-gap: 1remt;}

If you change it to auto-fill, it will be the following effect.

You can look at this picture for the difference between auto-fit and auto-fill.

Maximum width of picture

The author suggests that you can add the maximum width setting to img in the reset section, but does not say why. The personal guess is to consider the display of the image in the container, along with an object-fit attribute.

Img {max-width: 100%; object-fit: cover;} location: sticky css grid

When using a CSS grid layout, if the child element uses position: sticky, it will be stretched because the default alignment of the grid subelement is stretch.

What we really want is that the left sidebar is not stretched, so we need to change the alignment of the sub-elements themselves through align-self: start;.

Aside {align-self: start; position: sticky; top: 1rem;}

In that case, the effect will be different.

After a brief test, the same is true in the flex layout, mainly because the properties of the child elements are stretched.

Packet selector / * Don't do this, please * / input::-webkit-input-placeholder,input:-moz-placeholder {color: # 222;}

Now when you write CSS, you basically don't write prefixed attributes, but do it automatically by building tools. So I don't usually care about it. According to the author, if you write the two together, it will invalidate the whole rule, and it is recommended to write separately.

Input::-webkit-input-placeholder {color: # 222;} input:-moz-placeholder {color: # 222;} these are all the contents of this article entitled "what are the Tips to quickly improve your CSS skills?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.