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

<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 Guidep>
        <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 Demoh1>
          <button>Click Mebutton>
          <input type="text" placeholder="Type here..." />
          <a href="#">Learn Morea>
        main>

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