Share
In questo tutorial continueremo la nostra discussione sulle richieste di elementi, trasformando la nostra mano nella creazione di un componente reattivo riutilizzabile.
Per ricapitolare, le query di elementi ci consentono di plasmare un elemento in base alle caratteristiche del suo contenitore; la larghezza, l'altezza e così via. Ma vale la pena sottolineare che le query sugli elementi sono molto lontane dal diventare uno standard CSS, e probabilmente dovremo aspettare un paio di anni prima che ciò accada.
Quindi, per ora, dovremo ricorrere a una libreria JavaScript per emulare funzionalità simili, come EQCSS.
EQCSS è una libreria JavaScript sviluppata da Tommy Hodgins. Diamo un'occhiata ad alcuni motivi per optare per questa libreria.
Per cominciare, EQCSS ci dà una sintassi simile a CSS3 Media Queries standard con @elemento dichiarazione. Funziona all'interno di un foglio di stile o incorporato in a stile elemento, quindi sentirsi molto intuitivo. Nel codice seguente, ad esempio, impiliamo i menu nella navigazione per far fronte allo spazio restringente della navigazione (non della finestra).
.navigazione .menu display: blocco in linea; @element ".navigation" e (max-width: 480px) .navigation .menu display: block;
EQCSS offre molto di più della semplice query di larghezza o altezza. Fornisce inoltre query basate sul conteggio, che ci danno il potere di applicare regole di stile basate sul contenuto; il numero di caratteri, linee ed elementi contenuti.
.tweetContent // textarea background-color: #eaeaea; @element ".tweetContent" e (min-characters: 100) .tweetContent background-color: # ffc04d; // orange @element ".tweetContent" e (min-caratteri: 140) .tweetContent background-color: # FF3333; // colore rosso: #fff;
Supporta diverse unità CSS tra cui aggiunte recenti come vw, vh, Vmin, e vmax.
E per coloro che necessitano ancora di supporto per IE8, EQCSS fornisce un polyfill.
EQCSS è disponibile tramite Bower, NPM, CDNJS e direttamente dal repository in Github. Optare per qualsiasi uscita adatta alla distribuzione del progetto, e assicurarsi di averlo caricato nella tua pagina.
Ora, costruiamo qualcosa!
Stiamo per creare un componente dell'interfaccia utente del profilo utente e iniziamo con il markup HTML.
Louie R.
Terra di Mezzo
Uno sviluppatore e un frequente lettore StackOverflow. Nato, cresciuto e vivo sul Web. Parlo tre lingue: HTML, CSS e JavaScript.
La nostra componente consiste in un'immagine avatar, il nome utente, dove vivono, una breve biografia e un pulsante "Segui" à la Twitter e Medium.
Per prima cosa, impostiamo la larghezza del contenitore del componente UI e la modalità di visualizzazione flettere. La sintassi flexbox nel seguente frammento di codice non è prefissa per motivi di chiarezza, quindi funzionerà solo nei browser più recenti. Se necessario, puoi sempre utilizzare Autoprefixer per generare la sintassi più vecchia e i prefissi dei fornitori per supportare i browser legacy.
.profilo utente larghezza: 100%; larghezza massima: 640 px; display: flex;
Successivamente, impostiamo la proporzione della larghezza tra l'immagine dell'avatar e il riepilogo del profilo contenente il nome, la posizione e la breve biografia.
.user-profile__avatar width: 25%; larghezza massima: 120 px; flex: 1 1 120 px; .user-profile__summary width: 75%; padding-left: 25px; dimensione carattere: 1em;
Inoltre, regoliamo leggermente la dimensione del carattere del nome utente e della posizione.
.user-profile__name font-family: 'Montserrat', sans-serif; font-size: 1.3125em; .user-profile__location font-size: 0.87em;
Queste sono le regole di stile primarie per dimostrare come funzionano le query sugli elementi. Le regole stilistiche come background-color, testo colore, e box-ombra sono interamente a tuo gusto. Nel mio caso, appare come segue.
L'utilizzo di query di elementi con EQCSS è abbastanza intuitivo. Come accennato, la sintassi assomiglia molto a quella dei media CSS. Innanzitutto, come abbiamo mostrato in precedenza, denotiamo una query con elementi con @elemento seguito con uno o più selettori di elementi e la condizione della query come la larghezza, l'altezza, la posizione di scorrimento, ecc. dell'elemento.
@element 'header, nav, footer' e (min-width: 100px) e (min-height: min-height: 300px) // Regole di stile
Possiamo ora distribuirlo nel nostro componente UI, ad esempio, per ridimensionare la larghezza dell'elemento all'interno del contenitore e regolare la dimensione del carattere quando la larghezza del contenitore è ridotta.
@element '.user-profile' e (max-width: 540px) .user-profile font-size: 0.75em; .user-profile__avatar larghezza massima: 80px;
Inoltre, vogliamo che il componente dell'interfaccia utente sia riutilizzabile e, soprattutto, presentabile in qualsiasi parte del sito Web, indipendentemente dalla larghezza disponibile. La barra laterale, ad esempio, dove la sua larghezza è comunemente inferiore a 400px. In questo caso, poiché la larghezza è molto più stretta, dobbiamo riallineare l'intero layout del componente.
@element '.user-profile' e (max-width: 380px) .user-profile padding-top: 30px; imbottitura-fondo: 30px; blocco di visualizzazione; allineamento del testo: centro; .user-profile__avatar, .user-profile__summary width: 100%; .user-profile__avatar margin-right: auto; margin-bottom: 20px; margin-left: auto; .user-profile__summary padding-left: 0;
In questo tutorial abbiamo creato un componente UI per visualizzare un profilo utente. È reattivo, cambia in base al contenitore anziché alla finestra. Puoi guardare la pagina demo e vedere che il layout si sposta indipendentemente dalle dimensioni della finestra. pulito!
Questo è solo un esempio. Ci sono una manciata di altri esempi che altri hanno evidenziato dove le query sugli elementi hanno senso.
Ricorda; la sintassi in questo tutorial è interamente basata su EQCSS, indipendentemente dal fatto che il W3C Working Group la adotterà o crei la propria è ancora indecisa. Nondimeno, non vedo l'ora che questa idea venga adottata e rivoluzionando il modo in cui costruiamo i siti web ancora una volta.
Accentsconagua
