CSS ME, STUPID! ❤

10 cose che amo del CSS.

Di Francesco Riggio

CSS = Cascading Style Sheets

è un linguaggio che usiamo per definire la formattazione di documenti HTML, le pagine web.

HTML = struttura, CSS = stile

IN THE BEGINNING

Il primo browser commerciale a supportare il CSS fu Internet Explorer 3 di Microsoft, agosto 1996.

PERCHÈ AMO IL CSS

Perchè all'inizio degli anni 2000 ero solo, con l'HTML.

Perchè arrivò Mozilla Firefox.

❤ E quindi mi innamorai del CSS ❤

❤ 10 cose che amo del CSS

1. BACKGROUND-SIZE COVER

BACKGROUND-SIZE COVER

			.bassotti{
			  background: url(bassotto.jpg) center center no-repeat;
			  background-size: cover;
			  }
		
								

2. IMG RESPONSIVE

Due semplici istruzioni, e le immagini si adattano!

			img{
				max-width: 100%;
				height: auto;
				}
		
								

3. MEDIA QUERY

MEDIA QUERY: a ogni schermo le sue esigenze!

			@media (max-width: 500px;) and (orientation: portrait) {
				.mquery{
				 font-size: 1rem:
				 width: 100%;
				 }
				}
		
								

4. FLEXBOX Space Around

FLEXBOX Space Around: distribuire in maniera uniforme gli elementi!

div{
	display: flex;
	justify-content: space-around;
	}

					

5. FLEXBOX CENTER

con le istruzioni CENTER di Flexbox finalmente gestiamo con esattezza l'allineamento anche verticale

div{
	display: flex;
	justify-content: center;
	align-items: center;
	}

					

6. Emmet

con Emmet per scrivere codice basta un TAC...

7. Grid

Amo il display:grid perchè mi permette finalmente di mettere i bassotti dove voglio...

				div{
					display: grid;
					grid-template-columns: repeat(8, 1fr);
					grid-template-rows: repeat(6, 5vw);
					grid-gap: 1.5rem; 
					}
				
									

Grid

8. Sass

Con il pre-processing di Sass creo CSS come in un linguaggio di programmazione

			/* VARIABILI */
			$coloreRosso: rgba(195, 8, 65, 0.5);
			$coloreGiallo: rgba(222, 239, 11, 0.5);

			div.o1{ background-color: $coloreRosso; }
			div.o2{ background-color: $coloreGiallo; }
			

Sass

9. VARIABLE FONTS

Le VARIABLE FONTS aprono nuove possibilità di gestione dei testi

See the Pen CSS is Awesome - Variable fonts Edition. by Mandy Michael by FFrancesco (@FFLAB) on CodePen.

VARIABLE FONTS

Giulia Laco al WordCamp Milano 2019!

10. LIGHT LEVEL

LIGHT LEVEL per adattare lo stile all'ambiente!

See the Pen Piccalilli Issue #10 — User controlled dark mode by FFrancesco (@FFLAB) on CodePen.

+++ ! THE FUTURE... bonus track! +++

11. HOUDINI

Per approfondire:

I trucchi di Houdini: la magia nel futuro del CSS - Massimo Artizzu - cssday 2019 from GrUSP on Vimeo.