{"id":1443,"date":"2023-10-22T12:04:40","date_gmt":"2023-10-22T11:04:40","guid":{"rendered":"https:\/\/bitsolto.com\/bitacora\/?p=1443"},"modified":"2023-10-22T12:21:25","modified_gmt":"2023-10-22T11:21:25","slug":"consellos-trucos-css","status":"publish","type":"post","link":"https:\/\/bitsolto.com\/bitacora\/deseno-web\/consellos-trucos-css\/","title":{"rendered":"Consellos e trucos CSS"},"content":{"rendered":"\n

Calc(), Grid e Flexbox<\/h2>\n\n\n\n

Sabemos que o esencial para crear contidos web con estilo basta con HTML e CSS. Pero \u00e9 bastante habitual que por momentos nos esquezamos destas torcas e parafusos do dese\u00f1o web. Demasiado habituados ao uso de bibliotecas como Material, Semantic-Ui, Tailwind ou Bootstrap, ou outras; esquecemos alg\u00fans conceptos clave e moi \u00fatiles para o dese\u00f1o web.<\/p>\n\n\n\n

Falemos dalgunhas destas ferramentas CSS.<\/p>\n\n\n\n

C\u00e1lculo<\/h3>\n\n\n\n

A primeira ferramenta CSS que veremos \u00e9 a funci\u00f3n calc()<\/em> . Esta funci\u00f3n se pode engadir dentro do noso arquivo CSS. calc()<\/code><\/em> \u00e9 unha funci\u00f3n que executa ou ‘calcula’ unha ecuaci\u00f3n dentro das t\u00faas declaraci\u00f3ns. Para este exemplo, empregaremos un documento HTML b\u00e1sico con tres divs dentro dun div principal. Digamos que queremos facer que cada div fillo ocupe 1\/3 de todo o ancho da pantalla. Isto ser\u00eda doado se sabemos que a pantalla sempre ter\u00e1 un tama\u00f1o espec\u00edfico. calc()<\/code><\/em> permite ademais que o noso dese\u00f1o sexa sensible aos cambios de tama\u00f1o da pantalla.\u00a0<\/p>\n\n\n\n

<!DOCTYPE html>
\u00a0<html lang=\"en\">
\u00a0<head>
\u00a0 \u00a0 \u00a0<meta charset=\"UTF-8\">
\u00a0 \u00a0 \u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
\u00a0 \u00a0 \u00a0<link rel=\"stylesheet\" href=\"styles.css\">
\u00a0 \u00a0 \u00a0<title>Document<\/title>
\u00a0<\/head>
\u00a0<body>
\u00a0 \u00a0 \u00a0<div class=\"container\">
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-1\">One<\/div>
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-2\">Two<\/div>
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-3\">Three<\/div>
\u00a0 \u00a0 \u00a0<\/div>

\u00a0<\/body>
\u00a0<\/html><\/code><\/pre>\n\n\n\n
\u200barquivo html de referencia<\/small><\/p>\n\n\n\n
\u200b html, body{
     margin: 0;
 }
 \u200b
 .container > div {        
     outline: 1px solid black;  
 }
 .box-1 {
     width: calc( 100vw \/ 3 );     \/* calcula o 100% da vista e o divide entre 3 *\/
     color: white;                
     background: purple;
 }
 .box-2 {
     width: calc( 100vw * ( 2 \/ 3) );  \/* dous terzos da vista enteira *\/
     color: white;
     background: orange
 }
 .box-3 {
     width: 100vw;   \/* a vista enteira, para referencia *\/
     color: white;
     background: green;
 }<\/code><\/pre>\n\n\n\n
\u200barquivo cos estilos CSS<\/small><\/p>\n\n\n\n
\u200b<\/p>\n\n\n\n
No navegador podemos esperar os seguintes resultados:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u200btama\u00f1o dos div usando calc<\/small><\/p>\n\n\n\n
\u200b<\/p>\n\n\n\n
Neste exemplo, se axusta o ancho e o alto de resposta en 600px para que sexa f\u00e1cil ver que cada div \u00e9 1\/3, 2\/3 e despois o ancho completo. Pero, e se o ancho total da pantalla fose de 782px ou 911px? En lugar de facer aproximaci\u00f3ns con porcentaxes como o 33,33 % ou o 66,67 %, podemos calcular un terzo exacto da anchura de vista para eliminar a estimaci\u00f3n do tama\u00f1o do noso elemento.<\/p>\n\n\n\n
\n
Esta \u00e9 unha ferramenta moi \u00fatil en escenarios que precisan unha presentaci\u00f3n perfecta de pixels – pixel pefect<\/em>. Partindo do bosquexo ou wireframe do teu dese\u00f1o, podes descubrir a relaci\u00f3n entre o div e a pantalla do dispositivo de visualizaci\u00f3n. E logo, en lugar de asignar a cada compo\u00f1ente unha altura ou un ancho concreto, podes asignarlles valores calculados, como 1\/3 da altura ou do ancho da pantalla.<\/p>\n<\/blockquote>\n\n\n\n
CSS Flexbox<\/h3>\n\n\n\n
CSS flexbox \u00e9 unha funci\u00f3n de CSS que permite aplicar estilos aos elementos dunha p\u00e1xina nunha dimensi\u00f3n, e determinar o espazo entre os elementos e a direcci\u00f3n na que fl\u00faen, xa sexan columnas ou filas. Flexbox \u00e9 ideal para un conxunto de elementos que necesitan unha visualizaci\u00f3n uniforme en todos os \u00e1mbitos.<\/p>\n\n\n\n
O arquivo html de referencia para este exemplo \u00e9 o que segue:<\/p>\n\n\n\n
\u00a0<!DOCTYPE html>\n\u00a0<html lang=\"en\">\n\u00a0<head>\n\u00a0 \u00a0 \u00a0<meta charset=\"UTF-8\">\n\u00a0 \u00a0 \u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0 \u00a0 \u00a0<link rel=\"stylesheet\" href=\"styles2.css\">\n\u00a0 \u00a0 \u00a0<title>Document<\/title>\n\u00a0<\/head>\n\u00a0<body>\n\u00a0 \u00a0 \u00a0<div class=\"container\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-1\">Lorem ipsum dolor sit amet.<\/div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-2\">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, corporis!<\/div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-3\">Lorem ipsum dolor sit.<\/div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-4\">Lorem ipsum, dolor sit amet consectetur adipisicing.<\/div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-5\">Lorem ipsum dolor sit amet.<\/div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-6\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, delectus. Laudantium doloremque quam voluptatem nulla.<\/div>\n\u00a0 \u00a0 \u00a0<\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u200bsen estilo CSS (excepto para as cores de cada div)<\/small><\/p>\n\n\n\n
\u200b .box-1{
     background: blue;
 }
 .box-2{
     background: blueviolet;  
 }
 .box-3{
     background: orangered;
 }
 .box-4{
     background: yellowgreen;
 }
 .box-5{
     background: sandybrown;  
 }
 .box-6{
     background: gray;
 }<\/code><\/pre>\n\n\n\n
\u200bestilo CSS s\u00f3 para as cores de cada div<\/small><\/p>\n\n\n\n
\u200b<\/p>\n\n\n\n
Agora, para mudar a visualizaci\u00f3n e que todos os div dentro do \u201cdiv.container<\/code>” estean na mesma li\u00f1a, simplemente podemos configurar a visualizaci\u00f3n do contedor principal a “flex”. E todos encaixar\u00e1n na mesma li\u00f1a:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u200btodos os div son contidos na mesma li\u00f1a<\/small><\/p>\n\n\n\n
\u200b .container{
     display: flex;
 }
 \/\/ ...<\/code><\/pre>\n\n\n\n
\u200bconfigurar a visualizaci\u00f3n do contedor principal para flex<\/small><\/p>\n\n\n\n
\u200b<\/p>\n\n\n\n
Hai unha serie de funci\u00f3ns integradas en flexbox que permiten modificar a\u00ednda m\u00e1is a colocaci\u00f3n do contido na p\u00e1xina. Por exemplo, se non queremos todo nunha li\u00f1a, pero queremos manter a fila, podemos engadir un axuste flexible ao noso contedor principal. Isto, xunto con xustificar-contido: o espazo-equilibrio contin\u00faa o patr\u00f3n de mostrar os nosos divs fila por fila sen comezar unha nova fila para cada div, pero tam\u00e9n cambiando o espazo entre eles. Ao engadir un tama\u00f1o predeterminado aos divs, podemos ver o efectiva que poden ser esta adici\u00f3n:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u200bespazo entre cada elemento<\/small><\/p>\n\n\n\n
\u200b .container{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
 }
 .container > div {
     width: 200px;
 }
 \/\/ ...<\/code><\/pre>\n\n\n\n
Outra caracter\u00edstica de flexbox \u00e9 a capacidade de mover o contido de cada compo\u00f1ente fillo dentro de si mesmo. Con align-self<\/code>, podes cambiar o espazo dentro da caixa flexible que ocupa o div e onde se atopa.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u200bexemplo de align-self<\/small><\/p>\n\n\n\n
\u200b<\/p>\n\n\n\n
Mirando o exemplo anterior, podemos ver que align-self<\/code> pon o contido de cada div no centro, comezo ou final do div real.\u00a0<\/p>\n\n\n\n
.container{
\u00a0 \u00a0 \u00a0display: flex;
\u00a0 \u00a0 \u00a0flex-wrap: wrap;
\u00a0 \u00a0 \u00a0justify-content: space-around;
\u00a0}
\u00a0.container > div {
\u00a0 \u00a0 \u00a0width: 200px;
\u00a0}
\u00a0.box-1{
\u00a0 \u00a0 \u00a0background: blue;
\u00a0 \u00a0 \u00a0align-self: center;
\u00a0}
\u00a0.box-2{
\u00a0 \u00a0 \u00a0background: blueviolet;
\u00a0}
\u00a0.box-3{
\u00a0 \u00a0 \u00a0background: orangered;
\u00a0 \u00a0 \u00a0align-self: flex-end; \u00a0
\u00a0}
\u00a0.box-4{
\u00a0 \u00a0 \u00a0background: yellowgreen;
\u00a0 \u00a0 \u00a0align-self: flex-start;
\u00a0}
\u00a0.box-5{
\u00a0 \u00a0 \u00a0background: sandybrown; \u00a0
\u00a0 \u00a0 \u00a0align-self: flex-end;
\u00a0}
\u00a0.box-6{
\u00a0 \u00a0 \u00a0background: gray;
\u00a0}<\/code><\/pre>\n\n\n\n
\u200bali\u00f1ando o contido de cada div<\/small><\/p>\n\n\n\n
\u200b<\/p>\n\n\n\n
CSS flexbox tam\u00e9n ten outras moitas funci\u00f3ns \u00fatiles, como align-content<\/code>, align-items<\/code> e flex grow<\/code>. Todas elas permiten cambiar o dese\u00f1o e o tama\u00f1o dos elementos dentro do flexbox.<\/p>\n\n\n\n
Flexbox \u00e9 xenial porque pode organizar unha fila ou unha columna unidimensional do teu contido. E pode que por iso se use normalmente flexbox para dese\u00f1os de contedores e divs espec\u00edficos, en lugar de p\u00e1xinas enteiras.<\/p>\n\n\n\n
Pero que pasa cando necesitas organizar a t\u00faa p\u00e1xina enteira en d\u00faas direcci\u00f3ns? Iso l\u00e9vanos \u00e1 grella de CSS Grid.<\/p>\n\n\n\n
Grella CSS<\/h3>\n\n\n\n
Outra ferramenta para o estilo CSS \u00e9 CSS Grid. Mentres flex-box \u00e9 uni-dimensional, CSS Grid permite unha disposici\u00f3n bidimensional dos elementos da p\u00e1xina. Podemos empregar o noso html orixinal pero con alg\u00fan CSS diferente para explorar o uso de CSS Grid.<\/p>\n\n\n\n
\u00a0html, body{
\u00a0 \u00a0 \u00a0margin: 0;
\u00a0}
\u00a0\u200b
\u00a0.container {
\u00a0 \u00a0 \u00a0display: grid; \/* o contedor principal se disp\u00f3n como grella - grid *\/
\u00a0 \u00a0 \u00a0grid-template-columns: 1fr 2fr 3fr; \/* e se determina o tam\u00f1o para cada columna *\/
\u00a0}
\u00a0.box-1 { \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/* as\u00ed non precisamos especificar o ancho de cada div *\/
\u00a0 \u00a0 \u00a0color: white;
\u00a0 \u00a0 \u00a0background: purple;
\u00a0}
\u00a0.box-2 {
\u00a0 \u00a0 \u00a0color: white;
\u00a0 \u00a0 \u00a0background: orange
\u00a0}
\u00a0.box-3 {
\u00a0 \u00a0 \u00a0color: white;
\u00a0 \u00a0 \u00a0background: green;
\u00a0}<\/code><\/pre>\n\n\n\n
\u200bCSS empregando visualizaci\u00f3n en cuadr\u00edcula – grid<\/small><\/p>\n\n\n\n
\u200b<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u200bOs divs se ali\u00f1an por terzos nunha soa fila<\/small><\/p>\n\n\n\n
\u200b<\/p>\n\n\n\n
Como podes ver, reducimos a cantidade de CSS que temos que escribir para acadar o tama\u00f1o de cada div. Con CSS Grid, a unidade “fr” \u00fasase para facer referencia a unha fracci\u00f3n do espazo libre que queda na grella. A regra “grid-template-columns<\/code>” establece o valor de cada columna dentro dunha grella. Pode ser unha lonxitude, porcentaxe ou fracci\u00f3n, neste caso \u00e9 unha fracci\u00f3n. Neste exemplo, a primeira columna \u00e9 de 1\/5, a segunda de 2\/5 e a terceira de 3\/5 de ancho. (As fracci\u00f3ns son superiores a 5 xa que se sumas todos os valores de fr, obter\u00e1s 6).<\/p>\n\n\n\n
Se queremos recrear a mesma visualizaci\u00f3n que obtivemos usando a funci\u00f3n calc()<\/em> para crear 1\/3 e 2\/3, podemos ampliar as columnas do modelo inicial e engadir alg\u00fans CSS:\u00a0<\/p>\n\n\n\n
<!DOCTYPE html>\n\u00a0<html lang=\"en\">\n\u00a0<head>\n\u00a0 \u00a0 \u00a0<meta charset=\"UTF-8\">\n\u00a0 \u00a0 \u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0 \u00a0 \u00a0<link rel=\"stylesheet\" href=\"styles.css\">\n\u00a0 \u00a0 \u00a0<title>Document<\/title>\n\u00a0<\/head>\n\u00a0<body>\n\u00a0 \u00a0 \u00a0<div class=\"container\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-1\">One<\/div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-2\">Two<\/div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-3\">Three<\/div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-4\">Four<\/div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-5\">Five<\/div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0<div class=\"box-6\">Six<\/div>\n\u00a0\u200b\u00a0 \u00a0 \u00a0<\/div>\n\u00a0<\/body>\n\u00a0<\/html><\/code><\/pre>\n\n\n\n
crear seis caixas<\/small><\/p>\n\n\n\n
\u200b<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u200bpantalla dividida en terzos<\/small><\/p>\n\n\n\n
\u200b html, body{
     margin: 0;
 }
 \u200b
 .container {
     display: grid;
     \/* grid-template-columns: 1fr 2fr 3fr; *\/
     grid-auto-columns: 1fr; \/* cada columna \u00e9 unha peza igual do conxunto *\/
     grid-template-rows: repeat(3, 1fr 2fr 1fr); \/* repetir este patr\u00f3n de tama\u00f1o cada tres filas *\/
 }
 .box-1 {
     grid-column: 1; \/* comeza na columna 1, por defecto s\u00f3 ocupa un espazo de columna *\/
     color: white;
     background: purple;
 }
 .box-2 {
     grid-column: span 2;  \/* tramo da columna 1 ata a 2 *\/
     grid-row: 2;      \/* comezar na fila 2 *\/
     color: white;
     background: orange
 }
 .box-3 {
     grid-column: 3;   \/* comezar na columna 3 *\/
     grid-row: 3;      \/* comezar na fila 3 *\/
     color: white;
     background: green;
 }
 .box-4 {
     color: white;
     background: blue;
     grid-row: 4;
 }
 .box-5 {
     color: white;
     background: red;
     grid-column: span 2;
     grid-row: 5;
 }
 .box-6 {
     background: yellow;
     grid-column: 2; \/* asentar na columna do medio pero...*\/
     grid-row: 6;      \/* ocupando o espazo dunha soa columna *\/
 }<\/code><\/pre>\n\n\n\n
\u200bdando estilo \u00e1s caixas adicionais<\/small><\/p>\n\n\n\n
\u200b<\/p>\n\n\n\n
Vexamos o exemplo en detalle:<\/p>\n\n\n\n
No contedor, xeramos columnas autom\u00e1ticas que representan 1fr do espazo libre, o que significa que a cantidade de columnas depender\u00e1 de onde coloquemos os nosos elementos individuais, pero sempre ser\u00e1n unha fracci\u00f3n par do tama\u00f1o total. Despois, usamos a funci\u00f3n repeat()<\/em> para repetir ese tama\u00f1o de fila de 1fr, 2fr, 1fr cada tres filas. A\u00ednda que tiv\u00e9semos 200 divs no noso HTML, o tama\u00f1o de cada fila ser\u00eda 1fr 2fr 1fr, facendo que a fila do medio sexa d\u00faas veces m\u00e1is grande que a primeira e a \u00faltima do patr\u00f3n.<\/p>\n\n\n\n
Na parte inferior do arquivo CSS podes ver que establecemos o \u00faltimo div para que permaneza na columna central. Sen especificar que ten que ser m\u00e1is grande, o div ocupar\u00e1 automaticamente exactamente unha columna de ancho e unha fila.<\/p>\n\n\n\n
Hai decenas de funci\u00f3ns m\u00e1is en CSS Grid, pero isto pode servir para encetar. Iso si, recom\u00e9ndoche ler a documentaci\u00f3n e probar con CSS Grid at\u00e9 familiarizarse con este poderoso recurso de estilo. Constru\u00edr r\u00e9plicas de xornais ou xogos de cartas son algunhas boas formas de familiarizarse coa grella CSS. Funci\u00f3ns como row-gap<\/code> e column-gap<\/code>, ali\u00f1ar elementos e xustificar elementos dentro das s\u00faas columnas e filas e comprender a ubicaci\u00f3n poden levar o teu estilo CSS ao seguinte nivel.<\/p>\n\n\n\n
R\u00e1pido crecemento<\/h2>\n\n\n\n
CSS, como calquera outra tecnolox\u00eda, sempre est\u00e1 crecendo e cambiando. Cousas como flexbox levan m\u00e1is de 10 anos, pero sempre est\u00e1 a sufrir actualizaci\u00f3ns. CSS Grid \u00e9 algo m\u00e1is nova e realmente resolve moitos problemas que quedan abertos con flexbox. Cousas como o desprazamento instant\u00e1neo, as fontes variables e as unidades de relaci\u00f3n de aspecto son outras excelentes funci\u00f3ns para utilizar con CSS.<\/p>\n\n\n\n
Lembra que podes constru\u00edr un proxecto sen marcos de estilo e profundar nos poderes de CSS. Moitas empresas que buscan contratar un programador frontend est\u00e1n m\u00e1is interesadas na comprensi\u00f3n de CSS que no que se pode facer cunha biblioteca de estilos. An\u00edmoche a non pasar por alto os conceptos b\u00e1sicos do dese\u00f1o web e non ter medo de non estar ao d\u00eda das \u00faltimas tendencias CSS mentres saibas do poder dos conceptos fundamentais.<\/p>\n\n\n\n
Feliz codificaci\u00f3n!<\/p>\n\n\n\n
Recursos:<\/strong><\/em><\/p>\n\n\n\n