CSS Masonry Catness

CSS adalah seperti segala-galanya dalam teknologi-ia sentiasa berubah dan berkembang. Pembangunan berterusan dalam ruang ialah Modul Reka Letak Grid CSS Tahap 3 aka Reka Letak Batu CSS. Theo membuat video tentang cara ia berkembang dan perdebatan Apple dan Google tentang cara ia dilaksanakan.

Semua itu membuatkan saya teruja untuk mencuba batu CSS! Demo foto WebKit memberi inspirasi kepada saya untuk membuat paparan yang serupa dengan gambar kucing! Siapa yang tidak suka kucing?

Prasyarat

Untuk melihat perkara yang akan kami bina, anda memerlukan Pratonton Teknologi Safari atau untuk menjadikan reka letak bendera ciri.css.grid-template-masonry-value.enabled benar dalam Firefox.

Untuk mengakses bendera ciri dalam Firefox, taip about:config dalam bar alamat anda. Tekan enter dan anda boleh mencari grid atau rentetan yang disebutkan di atas. Togol kepada benar dan anda boleh pergi!

Kebiasaan asas dengan TypeScript/JavaScript, React dan Next.

Sediakan projek baharu

Buat projek Seterusnya baharu dalam terminal.

Jalankan arahan ini: npx create-next-app@latest

Kemudian anda mungkin perlu memasang pakej berikut:

create-next-app@15.0.1
Ok to proceed? (y) y

Namakan projek anda. Saya panggil cat-pics-waterfall saya

Teruskan menyediakan projek Seterusnya dalam terminal (pastikan anda tidak menggunakan Tailwind):

Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS? No
Would you like your code inside a 'src/' directory?  No
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for next dev? No
Would you like to customize the import alias (@/* by default)? No

Apabila projek anda selesai disediakan:

• Tukar direktori ke dalam projek anda dengan menjalankan arahan ini dalam cd terminal anda nama-projek anda.

• Bukanya dalam VSCode kemudian jalankan kod arahan ini . (sediakan arahan ini jika anda belum melakukannya)

Keluarkan boilerplate

Di dalam folder aplikasi terdapat fail yang dipanggil page.tsx Ini mempunyai semua kod yang dipaparkan dalam boilerplate.

Alih keluar kod itu dan simpan div atau serpihan buat masa ini. Berikut ialah contoh:

// app/page.tsx
export default function Home() {
  return <div></div>;
}

Terdapat juga lembaran gaya untuk halaman dalam folder apl. Ia dipanggil page.module.css dan anda boleh membukanya, pilih semua gaya di dalamnya dan padamkannya.

Mari tukar metadata kami dan jelaskan perkara yang dilakukan oleh apl kami. Kemas kini susun atur.tsx seperti itu:

// app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Cat Pics",
  description: "Bringing cats your way with experimental CSS",
};

export default function RootLayout({
  children,
}: Readonly) {
  return (
    
      
        {children}
      
    
  );
}

Tambahkan favicon kucing jika anda mahu juga (cara menambah favicon dalam Seterusnya)!

Cipta fail .env

Buat fail .env pada akar projek. Di sinilah kami akan menyimpan kunci API daripada The Cat API.

Daftar untuk The Cat API

Daftar untuk kunci API percuma daripada The Cat API. Selepas pendaftaran awal, anda akan menerima e-mel dengan kunci API anda. Salin kunci API itu dan buat pembolehubah baharu dalam .env. Saya memanggil kunci saya CAT_KEY.

.env setempat anda sepatutnya kelihatan seperti ini: CAT_KEY=your_api_key. Jika anda menggunakan ini, pastikan anda menambahkan ini di mana sahaja ia digunakan juga.

Bawa masuk gambar kucing!

Saya memperolehi daripada tunjuk cara WebKit yang dinyatakan di atas untuk mencipta halaman dan gaya untuk gambar kucing. Di sini kami memanggil API kami, memetakan hasil carian dan memaparkan gambar yang dikembalikan:

create-next-app@15.0.1
Ok to proceed? (y) y

Gayakan gambar

Sekarang kita telah membawa masuk gambar, mari lihat kerja batu CSS! Mengambil halaman daripada buku WebKit, berikut ialah page.module.css:

Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS? No
Would you like your code inside a 'src/' directory?  No
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for next dev? No
Would you like to customize the import alias (@/* by default)? No

Jika anda menyimpan fail anda dan menjalankan npm run dev dalam terminal anda, ia sepatutnya memberi anda halaman seperti ini (dengan imej dipilih secara rawak):

Terdapat banyak potensi untuk dibina di atas ini! Imej mengekalkan kualitinya dan tanpa pertanyaan media, halaman berasa responsif. Anda boleh menggunakan apa yang datang ke sini untuk CSS dengan cara lain, Theo mempamerkannya dalam videonya dan tunjuk cara daripada WebKit dan Google juga melakukannya.

Senangnya menjadi pembangun sekarang. Banyak alatan, ciri, masa jalan yang menakjubkan dan banyak lagi sedang dibina. Masa akan memberitahu dengan tepat bagaimana ini dilaksanakan dalam CSS. Walau bagaimanapun, ia diputuskan, yang menarik ialah CSS semakin sejuk.

Lihat repo yang saya buat untuk projek ini. Saya menggunakan ia pada Vercel juga, jika anda menggunakan salah satu daripada dua tetapan penyemak imbas yang dinyatakan dalam prasyarat, anda boleh menyemaknya di sini.

Anda boleh membina halaman yang memaparkan gambar kucing untuk itu, atau menyelesaikan tugas di tempat kerja. Apakah pendapat anda tentang ciri ini yang datang ke CSS? Bagaimanakah anda akan menggunakannya?

Atas ialah kandungan terperinci CSS Masonry Catness. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!