Le CSS est comme tout le reste dans la technologie : il change et évolue constamment. Un développement en cours dans l'espace est le module CSS Grid Layout niveau 3, également connu sous le nom de CSS Masonry Layout. Theo a réalisé une vidéo sur son développement et le débat qu'Apple et Google ont sur la manière dont il est mis en œuvre.
Tout cela m’a donné envie d’essayer la maçonnerie CSS ! Les démos de photos WebKit m'ont inspiré pour créer une vue similaire avec des photos de chats ! Qui n'aime pas les chats ?
Pour voir ce que nous allons construire, vous aurez besoin de Safari Technology Preview ou de définir l'indicateur de fonctionnalité layout.css.grid-template-masonry-value.enabled true dans Firefox.
Pour accéder aux indicateurs de fonctionnalités dans Firefox, tapez about:config dans votre barre d'adresse. Appuyez sur Entrée et vous pouvez rechercher la grille ou la chaîne mentionnée ci-dessus. Basculez-le sur vrai et vous êtes prêt à partir !
Connaissance de base de TypeScript/JavaScript, React et Next.
Créez un nouveau projet Next dans le terminal.
Exécutez cette commande : npx create-next-app@latest
Ensuite, vous devrez peut-être installer le package suivant :
create-next-app@15.0.1 Ok to proceed? (y) y
Nommez votre projet. J'appelle le mien photos de chat-cascade
Continuez la configuration du projet Next dans le terminal (assurez-vous de ne pas utiliser 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
Une fois la mise en place de votre projet terminée :
Changez de répertoire dans votre projet en exécutant cette commande dans votre terminal cd your-project-name.
Ouvrez-le dans VSCode en exécutant ensuite ce code de commande. (configurez cette commande si vous ne l'avez pas fait)
Dans le dossier de l'application, il y a un fichier appelé page.tsx. Il contient tout le code qui est rendu dans le passe-partout.
Supprimez ce code et conservez un div ou un fragment pour le moment. Voici un exemple :
// app/page.tsx
export default function Home() {
return <div></div>;
}
Il existe également une feuille de style pour la page dans le dossier de l'application. Il s'appelle page.module.css et vous pouvez l'ouvrir, sélectionner tous les styles qu'il contient et les supprimer.
Modifions nos métadonnées et rendons plus clair ce que fait notre application. Mettez à jour layout.tsx comme ceci :
// 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>
);
}
Ajoutez un favicon de chat si vous le souhaitez aussi (comment ajouter un favicon dans Suivant) !
Créez un fichier .env à la racine du projet. C'est ici que nous stockerons la clé API de l'API Cat.
Inscrivez-vous pour une clé API gratuite de The Cat API. Après l'inscription initiale, vous recevrez un e-mail avec votre clé API. Copiez cette clé API et créez une nouvelle variable dans .env. J'appelle ma clé CAT_KEY.
Votre .env local devrait ressembler à ceci : CAT_KEY=your_api_key. Si vous le déployez, assurez-vous de l'ajouter également partout où il est déployé.
Je m'inspire des démos WebKit susmentionnées pour créer la page et les styles des photos de chats. Ici, nous appelons notre API, cartographions les résultats et restituons les photos renvoyées :
create-next-app@15.0.1 Ok to proceed? (y) y
Maintenant que nous avons apporté les photos, voyons la maçonnerie CSS en action ! En prenant une page du livre de WebKit, voici 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
Si vous enregistrez vos fichiers et exécutez npm run dev dans votre terminal, cela devrait vous donner une page comme celle-ci (avec des images sélectionnées au hasard) :
Il y a beaucoup de potentiel à développer là-dessus ! Les images conservent leur qualité et sans requêtes multimédias, la page semble réactive. Vous pouvez utiliser ce qui arrive ici en CSS d'autres manières, Theo les a présentés dans sa vidéo et les démos de WebKit et de Google le font également.
C'est agréable d'être développeur en ce moment. De nombreux outils, fonctionnalités, environnements d'exécution étonnants et bien plus encore sont en cours de création. Le temps nous dira exactement comment cela sera implémenté en CSS. Quelle que soit la décision prise, le point à retenir est que CSS devient de plus en plus cool.
Jetez un oeil au repo que j'ai réalisé pour ce projet. Je l'ai également déployé sur Vercel, si vous utilisez l'une des deux configurations de navigateur mentionnées dans les prérequis, vous pouvez le consulter ici.
Vous pouvez créer une page qui affiche des photos de chats pour le plaisir, ou faire des choses au travail. Que pensez-vous de ces fonctionnalités arrivant dans CSS ? Comment vas-tu les utiliser ?
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
utilisation des instructions mul
Fichier au format DAT
Comment régler la luminosité de l'écran d'un ordinateur
Comment augmenter le nombre de fans de Douyin rapidement et efficacement
Comment fermer la bibliothèque de ressources d'application
présentation de l'interface Lightning
vue fait référence aux fichiers js
Formules de permutation et de combinaison couramment utilisées
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
