ottimizzare CSS

Benvenuto sul Forum PW
Cosa aspetti? Registrati subito! E' semplice e gratuito e risolvi subito i tuoi problemi!

ottimizzare CSS

Modalità discussione

Modalità lineare

04-05-2007, 22:55

Messaggio: #1 (permalink)

larchitetto

Apprendista

Registrato: Apr 2007
Messaggi: 70
Reputazione:

una cosa che non so fare ? quella di colorare i siti...

dunque avrei creato sto CSS qua (un po' grezzo, lo so, cmq tutto fatto da me da 0), e vorrei sottoporlo a voi tutti per un'eventuale ottimizzazione al volo del codice (istruzioni ripetute e/o inutili o altri modi pi? brevi e semplici di fare la stessa cosa ad esempio, ma senza perderci troppo tempo) e cmq se vi vien in mente un accoppiamento di colori un pochino migliore del mio (niente stravolgimenti, per carit?, solamente il bilanciamento dei colori insieme ad esempio)...
il sito mi serve per il server locale e per poter interagire con i miei contatti msn (qualora servisse), qundi non avr? milioni di visitatori, e non dovr? essere indicizzato =)

codice del css (non ancora validato):

Codice:

/*applicato a tutti gli elementi*/

* {

    margin: 0px;

    border: 0px;

    padding: 0px;

    width: auto;

    height: auto;

} 

/*regole base per html e body*/

    html, body {

 background-color: #FFF;

 color: #000;

 font: 100% sans-serif;

 width: 100%;

 height: 100%;

    }

/*regole base per i div*/

 div {

 margin: 5px;

 border-width: 2px;

 border-style: solid;

 border-top-color: rgb(99,0,255);

 border-right-color: rgb(255,0,24);

 border-bottom-color: rgb(156,0,255);

 border-left-color: rgb(255,132,0); 

 padding: 5px;

 background-color: #FFF;

 color: #000;

 }

/*l'intestazione della pagina*/

 div.header {

 margin: 0px 0px 10px;

 border-width: 0px 0px 4px;

 border-bottom-color: #F5F5F5;

 padding: 10px;

 background-color: #F5F5F5;

 color: #000;

 font: 900 100% arial sans-serif;

 }

/*regoel per il logo nell'intestazione*/

 #logo {

 padding: 4px 2px 2px 2px;

 width: 259;

 height: 32;

 }

/*regle per il titolo*/

 #w, #a, #m, #p {

 font-variant: small-caps;

 }

 #w {

 color: rgb(99,0,255);

 }

 #a {

 color: rgb(156,0,255);

 }

 #m {

 color: rgb(255,0,24);

 }

 #p {

 color: rgb(255,132,0);

 }

/*regole per il sottotitolo*/

 div.header h3 {

 padding-left: 150px;

 }

/*regole per il menu laterale*/

 div.menu {

 border-width: 2px 2px 0px;

 padding: 0px;

 width: 15%;

 color: #F60;

 letter-spacing: 1px;

 float: left; 

 }    

/*i paragrafi figli del menu, contenitore dei link*/

 div.menu p {

 border-bottom: 2px solid rgb(156,0,255);

 }

/*titolo in paragrafo del menu*/

 div.menu p#titolo {

 padding: 2px;

 font: bold 90%/21px verdana sans-serif;

 font-variant: small-caps;

 text-align: center;

 }

/*i link del menu*/

 div.menu a {

 display: block; 

 padding: 2px;

 font: bold 90%/21px verdana sans-serif;

 font-variant: small-caps;

 color: #F60;

 width: 150px;

 }

 div.menu a:hover, div.menu a:active {

 color: #F00;

 font-size: 100%;

 }

/*regole per la colonna accanto al menu, nonch? corpo della pagina. user? stili maggiormente dettagliati in base alla sezione cliccata*/

 div.corpo {

 width: 80%; 

 height: 60%;

 float: right;

 overflow: auto;

 }

/*finale della pagina*/

 div.footer {

 clear: both; 

 margin: 10px 0px 0px;

 border-width: 4px 0px 0px;

 border-top-color: #F5F5F5;

 padding: 15px 0px 0px;

 background-color: #F5F5F5;

 color: #000;

 font: 80%/21px arial sans-serif;

 text-align: center;

 width: 100%; 

 position: absolute;

 bottom: 0px;

 }

/*i link*/

 div.footer a {

 font: 100%/21px arial sans-serif;

 color: #F60;

 }

 div.footer a:hover, div.footer a:active {

 color: #F00;

 }

lo stile si applica a questo file php (il risultato non ? stato ancora validato):

Codice:

<?php 

    //sicurezza

    define("azzarola", true);

    //inclusioni

    include ("stat.php");

    include ("cont.php");

    echo"<!--dichiarazione applicazione xml-->\n";

    echo"<?xml version=\"1.0\"?>\n";

?>

<!--DTD xhtml 1.1-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!--pagina xhtml-->

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

 <title><?php echo $cont['/index.php']['0']; ?></title>

 <link rel="stylesheet" type="text/css" href="index.css" />

    </head>

    <body>

 <div class="header">

 <?php include ("header.php"); ?>

 </div>

 <div class="menu">

 <?php include ("menu.php"); ?>

 </div>

 <div class="corpo">

 <?php include ("corpo.php"); ?>

 </div>

 <div class="footer">

 <?php include ("footer.php"); ?> 

 </div>

    </body>

</html>

LarchitettO

Ultima modifica di larchitetto : 04-05-2007 alle ore 23:01.

04-05-2007, 23:23

Messaggio: #2 (permalink)

Helmakil

Forumista Giovane

Registrato: Dec 2006
Messaggi: 134
Reputazione:

RE: ottimizzare CSS

Ho dato solo un occhio al codice html... attento, che se qualcosa precede il doctype, ci possono essere problemi di resa... per il css, ti dir? domani.

04-05-2007, 23:39

Messaggio: #3 (permalink)

larchitetto

Apprendista

Registrato: Apr 2007
Messaggi: 70
Reputazione:

RE: ottimizzare CSS

problemi di che genere? :51:
solitamente faccio precedere il doctype solo dalla dichiarazione dell'xhtml (ovviamente) e dalle istruzioni preliminari php (ma quelle in fase di esecuzione non saranno "viste" dal browser e nemmeno in fase di validazione)... :22:

PS: ricordo che il progetto non andr? mai oltre il mio server locale quindi niente di apocalittico e di assurdo x) non lavorateci troppo :07: grazie ^^

LarchitettO

04-05-2007, 23:42

Messaggio: #4 (permalink)

Helmakil

Forumista Giovane

Registrato: Dec 2006
Messaggi: 134
Reputazione:

RE: ottimizzare CSS

di resa... infatti il doctype dovrebbe essere la prima parte del documento (anche la dichiarazione dell'xml, a rigor di logica, va dopo), e la sua mancanza nell'immediato pu? "dire" al browser che il documento che si va a leggere ? non standard, e dunque avviare un interprete diverso. Ricordo un articolo su html.it... lo cercher?

05-05-2007, 08:30

Messaggio: #5 (permalink)

larchitetto

Apprendista

Registrato: Apr 2007
Messaggi: 70
Reputazione:

RE: ottimizzare CSS

mmm su questa guida di html e sulla lezione successiva c'? scritto esattamente il contrario! O_O

Cosa andr? a leggere il browser?
Dal canto mio so per certo che il browser non legger? mai le istruzioni php (non ? come JS), bens? il suo output; inoltre certe istruzioni come session_start() vogliono la prima riga affinch? il parser non segnali un errore.

Quindi il parser php legger? il file php nella sua interezza, mentre il browser legger? dunque l'output dello script php.

il documento da me segnalato in precedenza avr? come output per il browser il seguente codice:

Codice:

<!--dichiarazione applicazione xml-->

<?xml version="1.0"?>

<!--DTD xhtml 1.1-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!--pagina xhtml-->

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

 <title>La mia W. A. M. P.!</title>

 <link rel="stylesheet" type="text/css" href="index.css" />

    </head>

    <body>

 <div class="header">

 <img id="logo" src="apache_pb22_ani.gif" /><br />

 <h1><span id="w">Gli </span><span id="a">sviluppi </span><span id="m">del mio </span><span id="p">server!</span></h1>

 <h3>. . . Come poter attrezzare un server locale . . .</h3>

 </div>

 <div class="menu">

 <p id="titolo">menu</p>

 <p><a class="voce2" href="/">home</a></p>

 <p><a class="voce2" href="index.php?par=blog">blog</a></p>

 <p><a class="voce2" href="index.php?par=info_generali">info generali</a></p>

 <p><a class="voce2" href="index.php?par=programmi">programmi</a></p>

 <p><a class="voce2" href="index.php?par=test">test</a></p>

 <p><a class="voce2" href="index.php?par=upload">upload</a></p>

 <p><a class="voce2" href="index.php?par=faq">faq</a></p>

 <p><a class="voce2" href="index.php?par=contatti">contatti</a></p>

 <p><a class="voce2" href="index.php?par=link">link</a></p>

 </div>

 <div class="corpo">

ancora vuoto!

 </div>

 <div class="footer">

 Hosted by <a class="foot" href="index.php?par=contatti">LarchitettO</a><br />

Work & Copyright&copy; 2007 <a class="foot" href="index.php?par=contatti">LarchitettO</a> - Tutti i diritti riservati

 </div>

    </body>

</html>

cio? con il doctype in testa (escludendo la dichiarazine xml).

quidi boh a sto punto non saprei... =P

LarchitettO

05-05-2007, 16:40

Messaggio: #6 (permalink)

Helmakil

Forumista Giovane

Registrato: Dec 2006
Messaggi: 134
Reputazione:

RE: ottimizzare CSS

http://blog.html.it/archivi/2007/05/02/c...andard.php questo spiega che qualsiasi testo precedente al doctype cambia il motore di resa di ie... Fatto sta che bisogna sempre controllare la data di pubblicazione delle guide e degli articoli... in realt? mi pare che abbia senso dichiarare prima il doctype che la versione di xml, visto che il nostro documento non ? xml ma xhtml, e dunque ha questo come sua base, non xml... Devo cercare l'articolo che ne parlava, stava nel blog, comunque

09-05-2007, 16:38

Messaggio: #7 (permalink)

larchitetto

Apprendista

Registrato: Apr 2007
Messaggi: 70
Reputazione:

RE: ottimizzare CSS

ah beh risolto... cos? sia FF che IE saranno felici...
cmq il link dell'articolo ? dentro l'articolo del blog...
l'importante, in sostanza, ? che prima del doctype non appia qualche altro tag - commento incluso. per? le istruzioni php posso precedere, perch? tanto il browser non le legger?. Infatti in fase di render, il browser dar? il doctype come prima istruzione del documento.
ho provato e funziona questa pagina con quest'istruzione nell'indirizzo "jalert(document.compatMode);":

Codice:

<?php 

    //sicurezza

    define("2a9p1r9i8l6e", true);

    //inclusioni

    include ("stat.php");

    include ("cont.php");

// PRIMA ISTRUZIONE xHTML E' PROPRIO IL DOCTYPE!!!  

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- BENVENUTO!

Ecco il codice xHTML della pagina.

 -->

<!--pagina xhtml-->

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

 <title><?php echo $conti[0]; ?></title>

 <link rel="stylesheet" type="text/css" href="index.css" />

 <style type="text/css">

 <?php 

 switch ($_GET['par']) {

 case null:

 echo ("@import url(home.css);\n");

 break;

 case $contm[8]:

 break;

 default:

 echo ("div.corpo p#avviso {\n");

 echo (" padding: 10% 0px 10% 10%;\n");

 echo (" font: bold 100%/2 arial sans-serif;\n");

 echo (" font-variant: small-caps;\n");

 echo (" }\n");

 }

 ?>

 </style>

    </head>

    <body>

 <div class="header">

 <?php include ("header.php"); ?>

 </div>

 <div class="container">

 <div class="menu">

 <?php include ("menu.php"); ?>

 </div>

 <?php include ("corpo.php"); ?>

 </div>

 <div class="footer">

 <?php include ("footer.php"); ?> 

 </div>

    </body>

</html>

Detto questo, non considerate pi? il CSS in quanto ? stato modificato di un bel po'
sto cercando di risolvere alcune imperfezioni che avverto solo con IE...

LarchitettO

09-05-2007, 18:17

Messaggio: #8 (permalink)

gokufg

Amministratore

Registrato: Oct 2006
Messaggi: 2,303
Reputazione:

RE: ottimizzare CSS

larchitetto ha scritto:

ah beh risolto... cos? sia FF che IE saranno felici...

Ottimo :07:

larchitetto ha scritto:

Detto questo, non considerate pi? il CSS in quanto ? stato modificato di un bel po'

Ok facci spaere appena lo termini.

A presto

Finito il seo contest zanzara mannara: complimentati con i vincitori del SEO contest wink

Ecco la SERP: zanzara mannara
Presentati al Forum PW se ancora non l'hai fatto

30-08-2007, 17:58

Messaggio: #9 (permalink)

demenziale

Apprendista

Registrato: Nov 2006
Messaggi: 25
Reputazione:

RE: ottimizzare CSS

intanto bravo che usi i css... c'e' ancora gente in giro che usa gli attributi

bravo!

io penso che dare un bordo ai div sia una scelta molto importante... cioe' i div dovresti usarli come il pane quasi ovunque e non sempre vuoi che abbiano i bordi. Al 90% non li hanno perche' stanno all'interno di altri div... Poi non preoccuparti se le tue scelte non sono azzeccate o ottimizzate o chissa' cosa: troverai il tuo stile piano piano

poi qui c'e' l'url per TUTTE le proprieta' dei css. buon divertimento (Ricorda di leggerti le proprieta' visual che sono quelle per le caratteristiche delle pagine web) Leggiti anche quelle per il print che vanno a modificare solo il layout della stampa della pagina (e' una cosa sensazionale credimi)

http://www.demenziale.altervista.org

ottimizzare CSS

Guarda versione stampabile
Invia la discussione a un amico
Sottoscrivi la discussione
Aggiungi discussione alle favorite

Regole di Scrittura

Tu non puoi inserire nuovi messaggi.
Tu non puoi rispondere ai messaggi.
Tu non puoi inviare messaggi.
Tu non puoi modificare i tuoi messaggi.

Il codice HTML è Disattivato.
Il codice MyCode è Attivato.
Gli Smilies sono Attivato.
Il codice [IMG] Attivato.

Vai al Forum:

Data e Ora attuale: 19-07-2008, 06:02