Regle de pàgina afegeix regles d'estil Photoshop i línies de guia arrossegables a qualsevol pàgina web. Les regles amb precisió de píxel recorren les vores superior i esquerra del visor, i pots arrossegar línies de guia sobre la pàgina per mesurar distàncies, comprovar l'alineació i verificar l'espaiat — tot directament sobre la pàgina en viu.
Els dissenyadors que treballen amb Figma o Photoshop confien en regles i guies per comprovar l'espaiat i l'alineació. Però quan aquests dissenys s'implementen en HTML/CSS, verificar la precisió dels píxels sol implicar obrir les DevTools, passar el ratolí per sobre dels elements un a un i comparar els valors computats amb la maqueta. Regle de pàgina porta el flux de treball familiar d'anar a regles i guies directament al navegador. Un regle horitzontal amb marques de graduació s'estén per la part superior del visor, i un de vertical per la vora esquerra — tots dos mostrant les posicions dels píxels. Fes clic i arrossega des de qualsevol dels regles per posar una línia de guia sobre la pàgina. Les guies estan codificades per colors (blau per a les horitzontals, vermell per a les verticals) i mostren la seva posició de píxel. La distància entre qualsevol parell de guies paral·leles es calcula i es mostra automàticament. Arrossega les guies per reposicionar-les o fes-hi doble clic per eliminar-les. Tota la capa de superposició és no intrusiva — se situa damunt de la pàgina sense afectar el disseny ni les interaccions.
Regles precises amb marques cada 50 píxels recorren les vores superior i esquerra del visor. Les regles es mouen amb la pàgina i mostren posicions de píxels precises relatives a l'origen de la pàgina (0,0). Marques cada 10px amb etiquetes cada 50px.
Clica i arrossega des del regle horitzontal per crear una guia horitzontal, o des del vertical per a una de vertical. Les guies s'ajusten a la posició del cursor i mostren la seva coordenada exacta de píxel (ex. y: 200px). Arrossega per reposicionar-les o fes-hi doble clic per eliminar-les.
Quan es col·loquen dues guies paral·leles, la distància de píxels entre elles es calcula automàticament i es mostra amb un claudàtor de connexió i una etiqueta. Col·loca dues guies horitzontals amb 120px de diferència i veuràs l'etiqueta "120px" entre elles.
Les guies horitzontals són blaves i les verticals vermelles — facilitant la distinció d'un cop d'ull quan hi ha múltiples guies. Cada guia mostra la seva posició en una petita insígnia d'etiqueta.
Les regles i les guies es renderitzen com una capa transparent que no afecta el DOM de la pàgina, el disseny ni el JavaScript. Encara pots fer clic a través d'ella per interactuar amb els elements de la pàgina. La capa només captura els clics sobre les regles i els controls de les guies.
Col·loca tantes guies com necessitis — no hi ha límit. Crea una quadrícula de mesura completa amb guies horitzontals i verticals markant cada punt d'alineació significatiu de la pàgina.
La maqueta indica que la capçalera fa 80px d'alçada i que el contingut comença a 120px de la part superior. Col·loca guies horitzontals en aquestes posicions i verifica a l'instant si la pàgina implementada coincideix amb les especificacions de disseny.
Col·loca guies a la part superior i inferior d'elements repetits (targetes, elements de llista, seccions) per verificar que tots tinguin un espaiat idèntic. Els espais inconsistents entre elements es tornen obvis immediatament.
Col·loca una guia vertical a la vora esquerra d'un encapçalament i després comprova si el text dels paràgrafs, botons i imatges de sota s'alineen amb la mateixa línia. Els desviaments de tan sols uns pocs píxels són visibles amb la guia.
Col·loca dues guies verticals a les vores esquerra i dreta d'un element per mesurar-ne l'amplada. Col·loca dues guies horitzontals per a l'alçada. La distància calculada automàticament t'oferirà les dimensions exactes dels píxels.
Col·loca una guia vertical a les amplades habituals dels punts de ruptura (768px, 1024px, 1280px) i canvia la mida del navegador per comprovar si els elements es reorganitzen correctament a cada punt. Les guies romanen fixes com a punts de referència visuals.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona de Regle de pàgina. Apareixeran regles amb precisió de píxel a les vores superior i esquerra del visor.
Fes clic i arrossega des del regle superior per col·locar una línia de guia horitzontal, o des de l'esquerre per a una de vertical. La guia seguirà el cursor i s'ajustarà a la posició del píxel on la deixis.
Cada guia mostra la seva posició de píxel (ex. y: 200px). Quan es col·loquen dues guies paral·leles, la distància entre elles es mostra automàticament amb un claudàtor etiquetat.
Arrossega qualsevol guia per moure-la a una posició nova — les etiquetes de distància s'actualitzaran en temps real. Fes doble clic en una guia per eliminar-la de la pàgina.
Torna a fer clic a la icona de Regle de pàgina per ocultar totes les regles i guies. Les posicions de les guies es conservaran si la tornes a activar durant la mateixa sessió.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
