Siamo tornati con la seconda voce nella serie Nettuts + Q & A. Oggi discutiamo la differenza tra LESS e Sass, come passare i valori lato server al tuo JavaScript, come lavorare con PHP e cookie, e il doctype HTML5. Eccoci qui!
Hey Nettuts +. Non ho capito bene. Qual è la differenza tra LESS e Sass? Sono gli stessi?
Ci sono vantaggi nell'usarli entrambi; tuttavia, la verità è che entrambi lavoreranno meravigliosamente. Diventa per lo più un caso di preferenza, quando si tratta della sintassi e così via. In passato, molti preferivano MENO, perché aveva una sintassi molto simile a CSS, sebbene, a partire da Sass 3, abbiano una nuova sintassi, nota come SCSS
(Sassy CSS), che è semplicemente un sottoinsieme della sintassi di CSS3.
Gli sviluppatori di Envato usano Sass. Altri sviluppatori popolari preferiscono MENO. Lo equiparerei al confronto tra il framework CSS 960 e Blueprint. Sono entrambi fantastici; quindi decidi tu. Non ci sono risposte sbagliate!
Vuoi saperne di più su LESS su Nettuts+?
Ho cercato di capire come passare il valore di una variabile PHP al mio JavaScript. Come faccio a fare questo? Grazie!
La soluzione più rapida e semplice è quella di richiamare la tua variabile desiderata all'interno del tuo JavaScript. Ad esempio, puoi interrogare il tuo database MySQL con PHP e quindi passare il valore restituito al tuo JavaScript facendo qualcosa sulla falsariga di:
Tut
Come posso scegliere un foglio di stile di colori per il mio sito web in modo dinamico?
Quindi tu vuoi, per esempio, scegliere red.css, o blue.css, e che caricarebbe una combinazione di colori diversa per il tuo sito web. È questo che vuoi dire? Esistono sicuramente diversi modi per svolgere questo compito, e la scelta corretta dipenderà dal fatto che tu stia utilizzando un framework, un CMS, un MVC, ecc. Manteniamo le cose semplici e il più semplici possibile. Possiamo usare PHP sessioni
. Innanzitutto, dobbiamo aggiungere un selezionare
box, per consentire all'utente di scegliere il foglio di colore desiderato.
Tut Scegli il tuo foglio di stile
Successivamente, con PHP, ascolteremo se la pagina è stata postata indietro o se il file Sottoscrivi
pulsante è stato cliccato. Con una semplice pagina come questa, possiamo usare l'utile $ _SERVER [ 'REQUEST_METHOD']
.
Il "Metodo di richiesta" determina quale metodo di richiesta è stato utilizzato per accedere alla pagina: "GET", "HEAD", "POST", "PUT" "
Nella parte superiore della pagina, aggiungi quanto segue:
Poiché ora possiamo confermare quando la pagina è stata postata, possiamo quindi creare un sessione
, e memorizzare il valore di qualsiasi cosa l'utente abbia scelto dalla casella di selezione.
Qui, stiamo prima creando una nuova sessione PHP, con session_start ()
. Successivamente, creiamo una nuova chiave, con $ _SESSION
, chiamato "color_scheme". Sentiti libero di chiamarlo come desideri. Per impostazione predefinita, lo impostiamo su "predefinito" (vedere la dichiarazione "else"). Ciò significa che, se l'utente non ha selezionato un foglio di stile, utilizzeremo quello predefinito. Tuttavia, se hanno fatto una scelta, abbiamo bisogno di determinare quale opzione dal selezionare
elemento che hanno scelto e memorizzarlo in una chiave di sessione.
Ritornando al mark-up, scoprirai che abbiamo applicato a nome
di "colori" al selezionare
elemento.
Quando la pagina postback, il valore selezionato di questo selezionare
elemento sarà disponibile per noi, via $ _POST [ 'colori']
. Ad esempio, se scelgo l'opzione "verde", $ _POST [ 'colori']
sarà quindi uguale a "verde".
Senza sessioni e cookie, non ci sarebbe modo di "ricordare" questo valore selezionato dall'utente. Ecco perché sono essenziali in questo caso. Ora che $ _SESSION [ 'color_scheme']
memorizza il nostro valore desiderato, abbiamo solo bisogno di caricare il foglio di stile appropriato.
Tut
Ciao Nettuts +! Come posso creare input di moduli arrotondati con CSS per tutti i browser?
Quindi vuoi input stilizzati e arrotondati in tutti i browser, incluso Internet Explorer? D'accordo. Considera il seguente semplice mark-up:
Usando alcuni semplici CSS3, possiamo creare angoli arrotondati per questi input. Poiché alcuni browser hanno avuto un vantaggio sulle specifiche, abbiamo bisogno di usare il -moz
e -webkit
prefissi del venditore, così come la versione ufficiale della proprietà "border-radius".
Specificando a
genere
attributo diSottoscrivi
, l'ultimo snippet punterà solo ai pulsanti di invio e verrà applicato di conseguenza.
Sfortunatamente, come probabilmente avete indovinato, Internet Explorer è un idiota. Mentre il prossimo IE9 ha il supporto per border-radius
(senza prefisso), le versioni precedenti sono ancora in perdita. A questo punto, hai due scelte:
Sto assumendo che il richiedente di questa domanda richieda coerenza; quindi andremo con la seconda opzione. Supponiamo che tu stia lavorando intensamente con CSS3 e HTML5 nel tuo progetto. In tal caso, piuttosto che usare un foglio di stile solo IE, perché non divertirti, e usare l'utile libreria Modernizr?
Innanzitutto, scarica Modernizr e fai riferimento al file modernizr.js all'interno del tuo progetto.
Tut
Successivamente, applica una classe di no-js
al html
elemento sulla tua pagina.
Quando visualizzi il tuo progetto nel browser, Modernizr applicherà una lunga serie di classi a html
elemento, che specifica esattamente di cosa è capace il tuo browser. Nota che, ovviamente, questo elenco di classi varierà, a seconda del browser.
Questo è un grande aiuto! Ora possiamo usare l'effetto "a cascata" per mirare solo agli elementi del modulo che sono figli del html
elemento con una classe di "no-borderradius" e di conseguenza lo stile.
Se il browser non supporta una particolare funzionalità, la parola "no" sarà preceduta dalla regola.
/ * Mira solo ai browser che non supportano l'input del raggio di confine * / .no-borderradius background: url (percorso / a / arrotondato / sfondo / immagine) no-repeat;
E poi ci rilassiamo e facciamo torta.
Ho notato che usi sempre il doctype HTML5. Non pensi che sia pericoloso, quando tutti i browser non supportano ancora HTML5?
No, non è affatto pericoloso. Per chi non ha familiarità con il doctype HTML5 meravigliosamente semplice, è:
Seriamente ... è così. Questo è tutto ciò che c'è da fare. Niente più ghirlande multilinea di attributi; solo un semplice DOCTYPE, come dovrebbe essere. Nei browser più vecchi, questo doctype li attiverà in standard-mode
... E se sei ancora preoccupato, nota che anche Google lo usa! Bisogno di piu? John Resig parlava di questo 2,5 anni fa!
"Ciò che è bello di questo nuovo DOCTYPE, in particolare, è che tutti i browser attuali (IE, FF, Opera, Safari) lo guarderanno e cambieranno il contenuto in modalità standard, anche se non implementano HTML5. inizia a scrivere le tue pagine web usando HTML5 oggi e fallo durare molto, molto, molto tempo. "
-John Resig
Se hai una domanda di sviluppo web "non troppo complicata" per noi, puoi:
Grazie per aver letto e guardato!