Hal-Hal yang Masih Dapat Digunakan CSS Menuju Tahun 2023

Hanya beberapa ide! Mereka mendatangi saya ketika saya sedang memikirkan sesuatu untuk dikatakan untuk Holiday Mega-Stream Alex Trost (segmen saya dimulai di sini).

Pengubah Gaya

Anda tahu bagaimana a <textarea> apakah ukurannya dapat diubah secara default?

Itu default yang bagus. Jika pengguna mengetik, mereka harus memiliki kendali atas seberapa banyak ruang yang mereka miliki untuk melakukannya. Jenis pengubahan ukuran ini tidak terbatas pada <textarea>. Anda dapat membuat apa saja yang dapat diubah ukurannya selama itu bukan an inline elemen dan memiliki overflow: hidden;.

div.resizeable 
  overflow: hidden;
  resize: both;
Code language: CSS (css)

Ada juga beberapa tingkat kontrol. Jika direction berubah menjadi rtl, pengubahan ukuran terjadi dari arah kiri bawah (inline-start block-end). Anda dapat membatasi pengubahan ukuran ke satu arah resize: vertical || horizontal – atau matikan dengan none.

Apa yang kamu tidak bisa lakukan adalah gaya itu dengan cara apapun. Nah, Anda bisa memposisikan beberapa elemen di atasnya pointer-events: nonetapi itu solusi lemah yang tidak, misalnya, memengaruhi area interaktif.

Itu terlalu buruk, karena kontrol bentuk gaya telah berkembang jauh, dan pada dasarnya itulah ini. Biar saya buat resizer itu cocok dengan keputusan gaya lainnya di situs saya!

Namun yang paling penting, saya ingin dapat memindahkan dan mengubah ukurannya. Saya suka jika, katakanlah, saya membuat resize: horizontal elemen, bahwa seluruh tepi arah inline adalah pegangan seret. Jika ini memungkinkan, ini akan mengurangi kebutuhan akan pustaka JavaScript berat yang membantu dalam hal ini.

Dan berbicara tentang resize: horizontaltidak seharusnya resize: inline (dan resize: block masing-masing) bekerja?

Pegangan pengubah ukuran itu adalah hal yang muncul di Shadow DOM, sejauh yang saya tahu. Sama seperti penambah angka a type="number" input, atau track and handle dari a type="range" memasukkan. Kami dapat menjangkau ke sana untuk menata berbagai hal, tetapi selalu penuh. Lihat A Sliding Nightmare: Memahami Masukan Rentang oleh Ana Tudor.

Mungkin organisasi standar tidak ingin menentukan implementasi Shadow DOM, sehingga browser yang mengimplementasikan memiliki kebebasan. Tapi itu menempatkan browser di depan penulis di depan pengguna. Ini adalah sesuatu yang akan membuat segalanya lebih baik bagi pengguna, dan penulis ingin melakukannya, jadi mari kita letakkan di browser.

Daerah yang Dapat Mengalir

Dengan columns di CSS, Anda dapat membuat teks yang mengalir ke beberapa kolom. Tapi ini datang dengan beberapa batasan yang cukup ekstrim.

Semua kolom harus memiliki lebar yang sama, untuk satu, dan Anda tidak dapat memaksakan elemen di beberapa kolom secara alami, yang sangat membatasi. Lebih buruk lagi, Anda tidak dapat memberi tahu konten ke mana harus mengalir setelah “mengisi” kolom – area tersebut bertambah tinggi atau meluap. Situasi di mana pengguna perlu menggulir ke bawah untuk membaca, lalu menggulir kembali ke atas untuk membaca kolom berikutnya adalah UX yang tidak dapat diterima.

Sekarang kita sudah kuat grid tata letak, memungkinkan konten mengalir secara alami ke susunan elemen yang ditentukan yang ditempatkan di grid akan sangat bagus. Saya harus bisa melakukan ini:

Sekitar tahun 2014, Adobe menganggap ini sebagai proyek hewan peliharaan. Ini adalah proyek yang benar-benar sempurna bagi mereka, karena melakukan hal semacam ini di aplikasi seperti InDesign adalah tujuan menggunakan aplikasi seperti InDesign, yang digunakan hanya untuk sebagian besar dari semua desain yang akan dicetak.

Kemudian “bapak CSS” menukik dan mengotorinya dengan banyak argumen yang saya pikir bodoh dan buruk saat itu dan saya pikir bodoh dan buruk sekarang.

Sepertinya speknya sudah diambil pada tahun 2021 lagi, dan saya senang melihatnya.

#this 
  flow-into: my-flow;


#there 
  flow-from: my-flow;
Code language: CSS (css)

Pemotongan Multi-Line Standar

Tahukah Anda bahwa semua browser sekarang mendukung pemotongan teks ke sejumlah baris tertentu? Saya tidak akan menyalahkan Anda jika Anda tidak melakukannya, karena semua kode ini perlu berfungsi:

.line-truncate 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
Code language: CSS (css)

Itu liar. Itu adalah sintaks flexbox yang sangat kuno dan sintaks penjepit garis yang diciptakan, semuanya diawali oleh vendor, ditambah persyaratan bonus yang diperlukan (yang tersembunyi overflow) yang memiliki efek samping yang menyebalkan (maaf, tidak box-shadow untukmu!).

Saya lebih suka:

line-clamp: 3;
Code language: HTTP (http)

Browser jelas dapat melakukannya! Buat itu mudah!

Mixin & Perpanjangan

Akan menyenangkan untuk mengatakannya hai pemilih, lakukan semua gaya yang sama seperti pemilih lainnya ini. Sass apakah itu seperti:

.some-selector 
  padding: 1rem;
  border: 1px solid black;
  border-radius: 5vmin;


.some-other-selector 
  @extend .some-selector;


Code language: JavaScript (javascript)

Masalahnya adalah penyeleksi itu mungkin berada di tempat yang sangat berbeda di Sass, dan apa yang Anda perluas tidak harus cocok dengan kekhususan yang sama, jadi ada beberapa urutan sumber nyata dan tantangan kekhususan dengannya. Peramban dapat memperluas jauh lebih alami, pada dasarnya merangkul hai pemilih, lakukan semua gaya yang sama seperti pemilih lainnya ini semangat tanpa semua kompromi canggung.

Atau, mixin bisa seperti ini:

@mixin stuff-to-reuse 
  padding: 1rem;
  border: 1px solid black;
  border-radius: 5vmin;


.whatever 
  @include stuff-to-resuse;
Code language: PHP (php)

Dengan Properti Kustom, kami bahkan tidak perlu kemampuan untuk meneruskan parameter ke mixin karena Anda dapat menggunakan cakupan pemilih untuk --whatever-you-want.

Pelintiran yang aneh… Style Queries agaknya bisa melakukan ini. Ambil ide penjepitan multi-garis itu… bisa dilakukan seperti ini:

@container style(--clamp: 3) 
  .card 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  


.random-element-with-a-card 
  --clamp: 3;
Code language: CSS (css)

Itu terasa sangat mirip dengan mixin bagi saya. Tapi saya lebih suka sintaks yang lebih langsung. Saya juga berpikir kita pada dasarnya membutuhkan antara mixin atau extends, mungkin bukan keduanya.

Pemotongan Baris Tunggal dari Kedua Sisi

Rupanya, pemotongan ada di pikiran saya. Anda juga dapat memotong satu baris. Juga membutuhkan beberapa properti:

.single-line-trucation 
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
Code language: CSS (css)

Kali ini tidak terlalu menggangguku. Mungkin menjatuhkan overflow: hidden persyaratan akan menyenangkan, tetapi harus menghentikan pembungkus untuk luapan satu baris itu adil.

Namun, inilah masalahnya: ini hanya akan memicu elipsis pada inline-end sisi elemen. Anda tidak dapat mengatakannya untuk memotong dari sisi lain.

Ini penting, bagaimana jika “bagian penting” dari teks itu sebenarnya ada di bagian akhir? Seperti, katakanlah, jalur file.

Anda dapat “mengelabui” elemen individu untuk memotong di sisi lain dengan membalikkan directiontapi, ehhh, sepertinya itu bukan rencana yang bagus untuk teks yang sebenarnya tidak ke arah itu (saya harus membayangkan ada implikasi aksesibilitas yang buruk untuk itu).

Animasikan ke Otomatis

Anda tidak dapat benar-benar dianimasikan dengan mulus height: 0 ke height: auto. Ini sangat mengecewakan karena sesuatu seperti pola desain akordeon memiliki konten ketinggian yang sewenang-wenang di panel dan harus dapat menyusut ke nol lalu meluas ke “berapa pun ketinggian alaminya” dengan waktu yang konsisten dan mulus.

.this-should-just-work 
  height: 0;
  transision: height 1s;

.this-should-just-work[data-open] 
  height: auto;
Code language: CSS (css)

Ada cara yang buruk untuk mengatasi hal ini, seperti membuat animasi max-height sebagai gantinya (tidak ada akhir yang mulus, harus menebak ukurannya) atau menggunakan JavaScript untuk menganimasikan. CSS harus bisa melakukannya. Tidak mungkin sesulit itu, kan ?!

Anehnya, ada trik CSS murni hari ini yang melibatkan animasi grid-template-rows. Ini dia. Mulailah dengan pembungkus untuk mengatur grid:

<div class="content">
  <div class="inside">
    Totally arbitrary content! 
  </div>
</div>
Code language: HTML, XML (xml)

Kemudian atur seperti ini:

.content 
  display: grid;
  grid-template-rows: 0fr;
  transition: 1s;
  overflow: hidden;

.content .inside 
  min-height: 0;

.content.expanded 
  grid-template-rows: 1fr;
Code language: CSS (css)

Jadi yang harus Anda lakukan adalah beralih kelas expanded pada pembungkus induk di sana dan itu akan berhasil.

Saya baru saja bermain-main dengan ini beberapa hari yang lalu ketika saya melihat “pulau dinamis” di iOS dapat berubah menjadi ukuran apa pun yang diperlukan juga, jadi saya membuat demo tentang itu:

Bersarang

Jelas.