Maison > Article > interface Web > Catness de maçonnerie CSS

Catness de maçonnerie CSS

Mary-Kate Olsenoriginal: 2024-11-01 07:09:30475parcourir

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 ?

Conditions préalables

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.

Configurer un nouveau projet

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)

Supprimer le passe-partout

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éer un fichier .env

Créez un fichier .env à la racine du projet. C'est ici que nous stockerons la clé API de l'API Cat.

Inscrivez-vous à 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é.

Apportez les photos de chats !

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

Stylisez les photos

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) :

CSS Masonry Catness

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!

JavaScript typescript firefox css safari npm webkit String if for select try continue copy map delete this vscode Access

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment empêcher le scintillement blanc lors du rechargement d’une page en mode sombre ?Article suivant：Comment empêcher le scintillement blanc lors du rechargement d’une page en mode sombre ?

Articles Liés

Voir plus