Tentang warisan dan pembagian nilai properti – Beragampengetahuan

Terkadang saya ingin menyetel nilai properti CSS ke nilai properti yang berbeda, meskipun saya tidak tahu berapa nilainya, dan meskipun nanti berubah. Namun sayangnya, hal ini tidak mungkin dilakukan (setidaknya, tidak ada fungsi CSS yang khusus melakukan hal ini).

Menurut saya akan sangat berguna untuk memiliki sesuatu seperti ini (untuk interpolasi, mungkin Anda akan membuangnya calc-size() juga ada):

/* Totally hypothetical */
button {
  border-radius: compute(height, self);
  border-radius: compute(height, inherit);
  border-radius: compute(height, #this);
}

Pada tahun 2021, Lea Verou menjelaskan mengapa penerapan fungsi CSS universal seperti itu tidak mungkin dilakukan meskipun telah diusulkan berkali-kali. Meski begitu, saya tetap berharap karena segala sesuatunya selalu berkembang dan proses CSSWG tidak selalu linier.

Pada saat yang sama, meskipun tidak ada fungsi CSS yang memungkinkan kita mendapatkan nilai properti berbeda, Anda dapat menggunakan metode berbeda untuk mencapai hasil, dan metode inilah yang akan kita bahas hari ini.

Metode Atribut Kustom CSS yang Sangat Mudah

Kita dapat dengan mudah mendapatkan nilai properti CSS yang berbeda menggunakan properti khusus, namun kita perlu mengetahui nilai tersebut untuk mendeklarasikan properti khusus terlebih dahulu. Hal ini tidak ideal, namun hal ini memungkinkan kita untuk mencapainya Beberapa hasil.

Mari kita kembali ke contoh di pendahuluan dan mencoba pengaturannya border-radius berdasarkan heighthanya kali ini kita mengetahui berapa tingginya dan menyimpannya sebagai properti khusus CSS agar dapat digunakan kembali, sehingga kita dapat mencapai hasil yang kita inginkan:

button {
  --button-height: 3rem;
  height: var(--button-height);
  border-radius: calc(var(--button-height) * 0.3);
}

Kita bahkan bisa menempatkannya di dalamnya --button-height Properti khusus lebih tinggi dalam kaskade CSS, membuatnya tersedia dalam konteks yang lebih berisi.

:root {
  /* Declare here to use anywhere */
  --button-height: 3rem;

  header {
    --header-padding: 1rem;
    padding: var(--header-padding);
  
    /* Height is unknown (but we can calculate it) */
    --header-height: calc(var(--button-height) + (var(--header-padding) * 2));
  
    /* Which means we can calculate this, too */
    border-radius: calc(var(--header-height) * 0.3);
  
    button {
      /* As well as these, of course */
      height: var(--button-height);
      border-radius: calc(var(--button-height) * 0.3);

      /* Oh, what the heck */
      padding-inline: calc(var(--button-height) * 0.5);
    }
  }
}

Saya pikir ketika guru matematika saya mengatakan suatu hari saya akan membutuhkan aljabar. Dia tidak berbohong!

Tidak didukung inherit() Metode fungsi CSS

ini inherit() Saat ini tidak ada dukungan di browser web mana pun untuk fungsi CSS yang memungkinkan kita mendapatkan nilai properti induk. memikirkan: inherit Kata kunci, selain nilai yang bisa kita peroleh setiap properti induk dan bahkan memodifikasinya menggunakan fungsi nilai, mis. calc(). Draf terbaru dari spesifikasi modul Nilai dan Unit CSS level 5 mendefinisikan cara kerjanya untuk properti khusus, yang sebenarnya tidak membiarkan kita melakukan apa pun yang tidak dapat kita lakukan (seperti yang ditunjukkan contoh sebelumnya), tapi mudah-mudahan ini akan berfungsi untuk semua properti CSS sehingga kita tidak perlu menggunakan properti khusus (hanya sedikit lebih lama):

header {
  height: 3rem;

  button {
    height: 100%;

    /* Get height of parent but use it here */
    border-radius: calc(inherit(height) * 0.3);
    padding-inline: calc(inherit(height) * 0.5);
  }
}

Namun, ada satu perbedaan antara pendekatan ini dan pendekatan properti kustom. Metode ini bergantung pada tinggi tetap orang tua, dan saat menggunakan metode properti khusus, orang tua atau anak dapat memiliki tinggi tetap.

ini berarti inherit() Tidak ada nilai yang akan dimasukkan. Misalnya, a auto nilai yang dihitung 3rem akan tetap diwariskan sebagai auto,Kapan inherit()-red., terkadang baik-baik saja, tapi terkadang bisa menjadi masalah. Secara pribadi, saya berharap interpolasi dapat dilakukan suatu saat nanti, sehingga lebih berguna daripada metode properti khusus.

Sampai saat itu tiba, masih ada beberapa opsi lain (kebanyakan khusus properti).

ini aspect-ratio Properti CSS

menggunakan aspect-ratio Properti CSS, kita dapat mengatur tinggi relatif terhadap lebar dan sebaliknya. Misalnya:

div {
  width: 30rem;

  /* height will be half of the width */
  aspect-ratio: 2 / 1;

  /* Same thing */
  aspect-ratio: 3 / 1.5;

  /* Same thing */
  aspect-ratio: 10 / 5;

  /* width and height will be the same */
  aspect-ratio: 1 / 1;
}

Secara teknis, kami tidak “mengerti” width atau heighttetapi kami menetapkan satu berdasarkan yang lain, yang merupakan hal yang penting (karena ini adalah rasio, Anda tidak perlu mengetahui nilai atau satuan sebenarnya dari keduanya).

ini currentColor Kata kunci CSS

ini currentColor Kata kunci CSS menentukan nilai yang dihitung color milik. Tipe datanya adalah <color>jadi kita bisa menggunakannya untuk menggantikan apa pun <color> pada atribut apa pun dari elemen yang sama. Misalnya saja jika kita menetapkan color tiba red (atau sesuatu untuk dipecahkan red), atau jika color Dihitung sebagai red Melalui warisan, kita bisa mendeklarasikan border-color: currentColor Buat batasnya menjadi merah juga:

body {
  /* We can set color here (and let it be inherited) */
  color: red;

  button {
    /* Or set it here */
    color: red;

    /* And then use currentColor here */
    border-color: currentColor;
    border: 0.0625rem solid currentColor;
    background: hsl(from currentColor h s 90);
  }
}

Hal ini memungkinkan kita untuk menggunakan kembali warna tanpa harus mengatur properti khusus, tentu saja color mengubah, currentColor akan secara otomatis memperbarui untuk mencocokkannya.

Meskipun hal ini tidak sama dengan mendapatkan warna apa pun, hal ini tetap sangat berguna. Faktanya, jika sesuatu seperti compute(background-color) Itu tidak mungkin, saya akan senang jika memiliki lebih banyak kata kunci CSS seperti itu currentColor.

Sebenarnya, currentBackgroundColor/currentBackground telah diusulkan. menggunakan currentBackgroundColor Misalnya, kita dapat mengatur warna tepi menjadi sedikit lebih gelap dibandingkan warna latar belakang (border-color: hsl(from currentBackgroundColor h s calc(l - 30))), atau campur warna latar belakang dengan warna lain dan gunakan itu sebagai warna tepi (border-color: color-mix(currentBackgroundColor, black, 30)).

Tapi mengapa berhenti di situ? mengapa tidak currentWidth, currentHeightdll?

ini from-font Kata kunci CSS

ini from-font Kata kunci CSS adalah hak milik text-decoration-thickness Properti yang dapat digunakan untuk mengatur ketebalan garis bawah. Jika Anda pernah benci selalu menggarisbawahi 1px tanpa memedulikan font-size Dan font-weightKemudian text-decoration-thickness dapat memecahkan masalah ini.

ini from-font Namun, kata kuncinya tidak menghasilkan nilai – kata kunci tersebut dapat disediakan secara opsional oleh produsen font dan disematkan dalam file font, jadi Anda mungkin tidak menyukai nilai yang mereka berikan (jika mereka menyediakannya). Jika tidak, auto akan digunakan sebagai cadangan, browser web memutuskan untuk melakukannya 1px. Tidak apa-apa jika Anda tidak pilih-pilih, tetapi masih tidak dapat diandalkan (dan tampaknya cukup khusus).

Namun, kita dapat menentukan nilai persentase, yang akan memastikan bahwa ketebalannya relatif font-size. Jadi jika text-decoration-thickness: from-font Hanya saja tidak dipotong dan kemudian kami menyimpannya sebagai cadangan (antara 8% Dan 12% harus melakukan ini).

Jangan meremehkan unit CSS

Anda mungkin sudah tahu vw Dan vh Unit (satuan lebar area pandang dan tinggi area pandang). Ini masing-masing mewakili persentase lebar dan tinggi area pandang 1vw Misalnya, 1% dari lebar viewport. Unit-unit ini dapat digunakan secara individu atau dalam a calc() fungsi dan digunakan dalam atribut apa pun yang menerima <length> satuan.

Namun, ada banyak unit lain yang kurang dikenal yang berfungsi dengan cara serupa:

• 1ex: sama dengan tinggi x yang dihitung
• 1cap: Sama dengan tinggi batas atas yang dihitung
• 1ch: sama dengan lebar yang dihitung 0 mesin terbang
• 1lh: sama dengan yang dihitung line-height (Selama Anda tidak memangkas atau menambah kotak isinya, misalnya menggunakan text-box atau paddingmasing-masing, lh Satuan dapat digunakan untuk menentukan tinggi suatu kotak dengan jumlah baris yang tetap)

Sekali lagi, Anda dapat menggunakannya, varian logisnya (mis. vi Dan vb), dan varian akarnya (misalnya, rex Dan rcap) dalam semua yang diterima <length> satuan.

Selain itu, jika Anda menggunakan kueri ukuran kontainer, Anda juga bebas menggunakan unit kueri kontainer berikut dalam konteks yang memuatnya:

• 1cqw: Sama dengan 1% dari perhitungan lebar wadah
• 1cqh: Sama dengan 1% dari tinggi wadah yang dihitung
• 1cqi: Sama dengan 1% dari ukuran inline kontainer yang dihitung
• 1cqb: sama dengan 1% dari ukuran blok penghitungan kontainer
• 1cqmin: sama dengan 1cqi atau 1cqbmana saja yang terkecil
• 1cqmax: sama dengan 1cqi atau 1cqbmana saja yang terbesar

Itu inherit() Tahukah Anda bahwa contoh sebelumnya saat ini tidak didukung oleh browser web apa pun? Berikut hal yang sama, tetapi dengan kueri ukuran kontainer:

header {
  height: 3rem;
  container: header / size;

  @container header (width) {
    button {
      height: 100%;
      border-radius: calc(100cqh * 0.3);
      padding-inline: calc(100cqh * 0.5);
    }
  }
}

Atau, karena kita berbicara tentang kontainer dan subkontainer langsungnya, kita dapat menggunakan versi yang lebih pendek berikut, yang tidak membuat dan menanyakan kontainer bernama (kita tidak perlu menanyakan kontainer tersebut, karena yang kita lakukan hanyalah mencuri unitnya!):

header {
  height: 3rem;
  container-type: size;

  button {
    height: 100%;
    border-radius: calc(100cqh * 0.3);
    padding-inline: calc(100cqh * 0.5);
  }
}

Namun, harap diingat inherit() akan memungkinkan kita untuk mewarisi apa pundan kueri ukuran kontainer hanya mengizinkan kita mewarisi ukurannya. Selain itu, kueri ukuran kontainer tidak berfungsi dengan kontainer sebaris (itulah sebabnya kontainer meregang secara horizontal di versi ini), jadi kueri tersebut tidak akan menyelesaikan semua masalah.

pendeknya

Aku hanya akan melempar compute() Sekali lagi, karena menurut saya ini adalah cara yang baik untuk mendapatkan nilai properti CSS lainnya:

button {
  /* self could be the default */
  border-radius: compute(height, self);
  /* inherit could work like inherit() */
  border-radius: compute(height, inherit);
  /* Nice to have, but not as important */
  border-radius: compute(height, #this);
}

Namun jika itu tidak memungkinkan, saya ingin memperkenalkan lebih banyak ide currentColor– Kata kunci serupa. Selain kata kunci seperti from-font Produsen font memberikan nilai (atau tidak, mendesah), kata kunci seperti currentWidth Dan currentHeight akan sangat berguna. Mereka akan membuat CSS lebih mudah dibaca dan kita tidak perlu membuat banyak properti khusus.

Pada saat yang sama, atribut khusus, aspect-ratiounit CSS tertentu dapat membantu kita dalam keadaan yang tepat, belum lagi apa yang akan kita dapatkan inherit() masa depan. Ini terutama untuk mendapatkan lebar dan tinggi, yang tidak masalah karena ini tidak diragukan lagi merupakan masalah terbesar di sini, tapi semoga akan ada lebih banyak fitur CSS di masa mendatang yang memungkinkan nilai digunakan di lebih banyak tempat.