CSS 砌體 Catness
- Mary-Kate Olsen原創
- 2024-11-01 07:09:30563瀏覽
CSS 就像技術中的其他東西一樣 - 它總是在變化和發展。該領域正在進行的開發是 CSS 網格佈局模組層級 3，也稱為 CSS Masonry 佈局。 Theo 製作了一段視頻，介紹了它的開發方式以及蘋果和谷歌就如何實施它進行的辯論。
所有這些讓我很高興嘗試 CSS 砌體！ WebKit 照片示範啟發我用貓的照片製作類似的視圖！誰不愛貓呢？
先決條件
要查看我們要建立的內容，您需要 Safari 技術預覽版，或在 Firefox 中將功能標誌 layout.css.grid-template-masonry-value.enabled 設為 true。
要存取 Firefox 中的功能標誌，請在網址列中輸入 about:config。按下回車鍵，您可以搜尋網格或上面提到的字串。將其切換為 true，然後就可以開始了！
基本上熟悉 TypeScript/JavaScript、React 和 Next。
設定一個新項目
在終端機中建立一個新的 Next 專案。
執行此指令：npx create-next-app@latest
那麼您可能需要安裝以下軟體包：
create-next-app@15.0.1 Ok to proceed? (y) y
為您的項目命名。我稱我的貓為圖片瀑布
繼續在終端機中設定下一個項目（確保不要使用 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
當您的專案完成設定後：
透過在終端機 cd your-project-name 中執行此命令將目錄變更為您的專案。
然後執行此命令程式碼在 VSCode 中開啟它。 （如果還沒有設定此指令）
刪除樣板
應用程式資料夾內有一個名為 page.tsx 的文件，其中包含樣板檔案中呈現的所有程式碼。
刪除該程式碼並暫時保留 div 或片段。這是一個例子：
// app/page.tsx
export default function Home() {
return <div></div>;
}
應用程式資料夾中還有一個頁面樣式表。它名為 page.module.css，您可以打開它，選擇其中的所有樣式，然後刪除它們。
讓我們更改我們的元數據，讓我們的應用程式的功能更加清晰。像這樣更新layout.tsx：
// 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<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
如果您也願意的話，可以添加一個貓的圖標（如何在下一步中添加圖標）！
建立 .env 文件
在專案根目錄建立一個 .env 檔案。我們將在此處儲存來自 Cat API 的 API 金鑰。
註冊 Cat API
從 The Cat API 註冊免費的 API 金鑰。初始註冊後，您將收到一封包含 API 金鑰的電子郵件。複製該 API 金鑰並在 .env 中建立一個新變數。我將我的鑰匙稱為 CAT_KEY。
您的本地 .env 應如下所示：CAT_KEY=your_api_key。如果您部署此功能，請確保將其新增至部署的任何位置。
把貓咪的照片拿出來！
我從前面提到的 WebKit 演示中收集資訊來創建貓圖片的頁面和樣式。在這裡，我們呼叫 API，映射結果，並渲染返回的圖片：
create-next-app@15.0.1 Ok to proceed? (y) y
為照片設計風格
現在我們已經引入了圖片，讓我們看看 CSS 砌體的實際效果！從 WebKit 的書中取出一頁，這裡是 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
如果您儲存檔案並在終端機中執行 npm run dev，它應該會給您一個像這樣的頁面（隨機選擇映像）：
在此基礎上還有很大的潛力！圖像保持其質量，並且沒有媒體查詢，頁面感覺響應靈敏。您可以透過其他方式使用 CSS 中的內容，Theo 在他的影片中展示了它們，WebKit 和 Google 的演示也是如此。
現在成為開發者真是太好了。許多令人驚嘆的工具、功能、運行時等等正在建置中。時間會告訴我們這是如何在 CSS 中實現的。不管最終如何決定，結論是 CSS 變得越來越酷。
看看我為這個專案製作的儲存庫。我也在 Vercel 上部署了它，如果您使用先決條件中提到的兩個瀏覽器設定之一，您可以在這裡查看。
您可以建立一個頁面來渲染貓的圖片，或在工作中完成工作。您如何看待 CSS 的這些功能？你打算如何使用它們？
以上是CSS 砌體 Catness的詳細內容。更多資訊請關注PHP中文網其他相關文章！