防御性 CSS

防御性 CSS 是一组代码片段，可以帮助您编写受保护的 CSS 。换句话说，你在未来会有更少的问题。

包含代码片段

Flexbox Wrapping

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

Image Distortion

img {
    object-fit: cover;
}

Long Content

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

Component Spacing

.section__title {
    margin-right: 1rem;
}

Auto-fit Vs Auto-fill

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1rem;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 1rem;
}

.wrapper {
  --sizing: auto-fit;
  display: grid;
  grid-template-columns: 
  repeat(var(--sizing), minmax(100px, 1fr));
  grid-gap: 1rem;
}

Background repeat

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

CSS grid fixed values

.wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1rem;
}
 @[media](/name/media) (min-width: 600px) {
    .wrapper {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 1rem;
    }
}

CSS Variable Fallback

.message__bubble {
    max-width: calc(100% - var(--actions-width));
}

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

.element {
  background-color: var(--brand-color, lightblue);
}

Fixed sizes

.hero {
    height: 350px;
}
.button {
    width: 100px;
}

Minimum Content Size In CSS Flexbox

.card {
    display: flex;
}

.card__title {
    overflow-wrap: break-word;
    min-width: 0;
}

Minimum Content Size In CSS grid

<div class="wrapper">
    <main>
        <section class="carousel"></section>
    </main>
    <aside></aside>
</div>

    .wrapper {
        display: grid;
        grid-template-columns: 1fr 248px;
        grid-gap: 40px;
    }
}

.carousel {
    display: flex;
    overflow-x: auto;
}

<div class="page">
    <div class="page__item page__item--main">
        <div class="slider">
            <div class="slider__item"></div>
            <!-- more items -->
        </div>
    </div>
    <div class="page__item page__item--aside"></div>
</div>

.slider {
    display: flex;
}

.page {
    display: grid;
    grid-template-columns: 1fr 100px;
    grid-gap: 1rem;
}
.page__item--main {
    /* prevent the grid item from respecting the
    * minimum content size
    */
    min-width: 0;
}

Grouping vendor selectors

input::-webkit-input-placeholder {
    color: #222;
}

input:-moz-placeholder {
    color: #222;
}

Image maximum width

img {
    max-width: 100%;
    object-fit: cover;
}

Position sticky with CSS Grid

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

Scroll chaining

.modal__content {
    overscroll-behavior-y: contain;
    overflow-y: auto;
}

.modal__body {
    overscroll-behavior-y: contain;
    overflow-y: auto;
}

Scrollbar gutter

.element {
    scrollbar-gutter: stable;
}

Scrollbars on demand

.element {
    overflow-y: auto;
}

Using space-between

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

Text over image

.card__img {
    background-color: grey;
}

Vertical media queries

position: sticky

margin-auto

Accidental hover on mobile

    .card:hover {
        /* Add hover styles.. */
    }
}

Image inner border

<div class="card__avatar">
  <img src="assets/shadeed.jpg" alt="" />
  <div class="border"></div>
</div>

.card__avatar {
  position: relative;
}

.card__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.border {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 2px solid #000;
  border-radius: 50%;
  opacity: 0.1;
}

Default flexbox stretching

<div class="person">
    <img class="person__avatar" src="img/avatar.jpg" alt="">
    <div class="person__content">
        <h3>Ahmad Shadeed</h3>
        <p><!-- Description goes here.. --></p>
    </div>
</div>

.person {
    display: flex;
}
.person__avatar {
    /* other styles */
    align-self: start;
}
.person {
    display: flex;
    align-items: center;
}

Input zoom on iOS Safari

input {
    font-size: 16px;
}

详见 https://defensivecss.dev/