Web Dev Q & A # 2 - Sessioni PHP, Doctype HTML5 e Stile dei moduli

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!


1. MENO e Sass.

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+?


2. Lato server a lato client

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     

3. Stili di stile personalizzati con PHP

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  

4. Elementi di forma arrotondati

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".

 
  • -moz: Browser Mozilla (Firefox)
  • -webkit: Browser Webkit (Safari, Chrome)

Specificando agenere attributo di Sottoscrivi, l'ultimo snippet punterà solo ai pulsanti di invio e verrà applicato di conseguenza.

Quel Blasted IE

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:

  1. Ignoralo. Il mondo non finirà se i tuoi lettori vedranno angoli di 90 gradi.
  2. Image Fallback. Puoi scegliere come target Internet Explorer e applicare un'immagine di sfondo arrotondata.

Modernizr

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.


5. Doctypes

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


Leggi le domande e risposte precedenti

  • N. 1: Callbacks, LESS e Floats

Chiedi Nettuts + ...

Se hai una domanda di sviluppo web "non troppo complicata" per noi, puoi:

  1. Invia un'email a [email protected] e scrivi "Web Dev Q & A" come oggetto dell'email.
  2. Tweet @nettuts e hash "#askNettuts".
  3. Lascia un commento sotto qualsiasi pubblicazione "Web Dev Q & A" con la tua nuova domanda.

Grazie per aver letto e guardato!