css2024

1 :has() Selector

    <ul>
        <li>
          <label> <input type="radio" name="source" />谷歌</label>
        </li>
        <li>
          <label> <input type="radio" name="source" />口碑</label>
        </li>
        <li>
          <label> <input type="radio" name="source" />其他</label>
        </li>
      </ul>

  <style>
    ul li input:checked {
      accent-color: #f806e4;
    }
    ul li:has(input:checked) {
      border: 2px solid #f806e4;
    }
  </style>

2： Container Queries

<!-- HTML code structure of individual component -->

<section id="featured-course" class="courses">
  <div class="course">
    <div class="course-card">
      <img src="./images/gpt-thumb.webp" alt="" class="course-thumb" />
      <div class="course-info">
        <p class="course-name">ChatGPT - The Complete Guide</p>
        <p>
          10x your productivity by using ChatGPT OpenAI APIs efficiently.
          Learn Midjourney, prompt engineering, AutoGPT and more!
        </p>
      </div>
    </div>
  </div>
</section>

 <style>
    .courses {
      display: flex;
      gap: 10px;
      justify-content: center;
      .course {
        container-type: inline-size;
        width: 100%;
        .course-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          background: #620b79;
          border-radius: 5px;
          box-shadow: 1px 1px 1px #333333;
          width: 100%;
          height: 100%;
        }
      }
    }

    .course-thumb {
      max-width: 100%;
    }
    @container (min-width: 400px) {
      .course-card {
        flex-direction: row;
        align-items: normal;
      }

      .course-thumb {
        width: 50%;
      }
    }
  </style>

3: CSS Nesting

.container {
  max-width: 800px;
  margin: auto;
  background-color: #f5f5f5;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.container h1 {
  color: #1a237e;
}

.container p {
  color: #757575;
}

.container {
  max-width: 800px;
  margin: auto;
  background-color: #f5f5f5;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;

  h1 {
    color: #1a237e;
  }

  p {
    color: #757575;
  }
}

4: New Value for text-wrap: balance

.balanced-text h2 {
  color: #ffa726;
  text-wrap: balance;
}

.unbalanced-text h2 {
  color: #fc01da;
}

5:The :focus-visible Pseudo Class

        <main>
          <h1>Focus-visible Demo</h1>
          <button>Click Me</button>
          <input type="text" placeholder="Type here..." />
          <a href="#">Learn More</a>
        </main>

    button:focus-visible,
    input:focus-visible,
    a:focus-visible {
      border-color: #1e88e5;
      box-shadow: 0 0 3px 2px #1e88e580;
    }