Els estils que importen
Sense regles ratllades: font, mida, pes, interlineat, color, fons, vores, radi i ombra.
Inspecció de disseny
Inspector CSS: passa el ratolí i veuràs com està feta la pàgina
L’inspector CSS de Smart Design Inspector mostra els estils calculats, la caixa, els marges, els paddings i les distàncies de qualsevol element en passar el ratolí, sense obrir les eines de desenvolupador.
Inspeccionar, mesurar distàncies i el regle: gratis per sempre
h1 · yourclient.example
- Font
- Inter
- Mida
- 48 px
- Pes
- 600
- Interlineat
- 1,1
- Color
- #0B0B0B
- Fons
- transparent
- Vores
- —
- Radi
- 0
- Ombra
- —
Copiar CSS
margin024
border0
padding0
560 × 106
| Fins al botó | 24 px |
| Fins al paràgraf | 16 px |
| Fins a la vora esquerra | 64 px |
01
DevTools no està pensat per dissenyar
El problemaA DevTools, per saber la mida de lletra d’un titular has d’obrir el panell, buscar l’element a l’arbre i baixar per una llista de regles ratllades. Per saber la distància entre dos blocs, has de sumar marges a mà.
02
Què hi veus en passar el ratolí
4 cosesCaixa
Amplada, alçada, marges i paddings dibuixats sobre l’element.
Distàncies
Fixa un element amb un clic i passa el ratolí per un altre: veus els píxels que hi ha entre tots dos.
Regle
Mantén premuda la tecla Alt i mesura qualsevol zona de la pàgina.
03
Prova-ho en aquesta pàgina
Sense instal·larUna web d’exemple i el panell de l’inspector, sense instal·lar res. Passa el ratolí per un element, o tria’l a la llista, i veuràs els seus estils, la caixa i la distància a l’element de sota.
Tria un element
Smart Design Inspector · CSSh1.hero-title
- Font
- —
- Mida
- —
- Pes
- —
- Interlineat
- —
- Color
- —
- Fons
- —
- Vores
- —
- Radi
- —
- Ombra
- —
- Caixa
- —
- Marge
- —
- Padding
- —
Distància fins a baix
—
Web d’exemple · els valors es llegeixen d’aquesta pàgina
04
Després d’inspeccionar
4 funcions| Gratis0 €per sempre | Pro49 €pagament únic | |
|---|---|---|
| Inspeccionar en passar el ratolí: CSS calculat, caixa, marges i paddings | ||
| Copiar el CSS de cada element | ||
| Mesurar distàncies entre elements i regle | ||
| Copiar una secció com a JSX + Tailwind o HTML/CSS | — | Accés anticipat gratuït |
| Exportar el sistema de disseny | — | Accés anticipat gratuït |
És gratis?
Sí. Inspeccionar, mesurar distàncies i el regle són gratis per sempre.
En què es diferencia de DevTools?
Mostra només els estils que s’apliquen, sense regles ratllades, i dibuixa mides i distàncies sobre la pàgina. DevTools continua sent millor per depurar JavaScript o la xarxa.
Funciona en qualsevol web?
En qualsevol pàgina que s’obri a Chrome. Les pàgines internes del navegador i la mateixa Chrome Web Store no deixen que les extensions les llegeixin.
Puc copiar el CSS?
Sí, el de cada element. Per copiar una secció sencera com a JSX + Tailwind o HTML/CSS hi ha la funció Pro.
En quins navegadors i sistemes funciona?
A Chrome, Edge, Brave, Arc, Opera i Vivaldi, a Windows, Mac i Linux, des de la 1.0. Funciona igual a tots perquè l’extensió l’executa el navegador, no el sistema. El codi està preparat per portar-la a Firefox i Safari sense reescriure-la. Mentre està en desenvolupament, hi pot haver canvis.
Llista d’espera
Sigues dels primers a provar-lo
Smart Design Inspector està en desenvolupament. Deixa’ns el teu correu i t’avisarem el dia que surti a la Chrome Web Store, amb les 7 funcions Pro gratuïtes en accés anticipat.
Un correu el dia del llançament i pocs més · Baixa amb un clic