Curiosità codice CSS con il DOCTYPE html

29-03-2014, 00.16.10

Io aimè ho imparato a programamre con i marcatori senza usare i !DOCTYPE, e quando per esempio per modernizzarmi aggiungo il doctype => !DOCTYPE html, la grafica mi si "squaglia", cosa cambia nell'usare i DOCTYPE? Quello che ho scritto non è a norma di W3S?

Codice Css

Codice HTML:

body
{
	margin:0;
	background:#dedede;
}
#container
{
	width:400;
	margin:auto;
}
header
{
	padding:10;
	width:100%;
	position:relative;
	background:#242424;
	border-bottom:1px solid #111;
}
#ch
{
	width:50px;
	margin:auto;
}
#box
{
	margin-top:50%;
	padding:20;
	background: #59A6D6;
	border:1px solid #1D8DD3;
	border-radius:8;
}
button
{
	width:100%;
	padding:20;
	font-family:Fredoka One;
	
}
#sec,#min,#ore,#fine
{
	text-align:center;
	padding:10;
	font-size:40;
	color:#153D9B;
	font-family:Fredoka One;
}
#config
{
	font-family:Fredoka One;
	width:50;
	position:absolute;
	margin-top:0;
	margin-left:-100;
	padding:20;
	background: #59A6D6;
	border:1px solid #1D8DD3;
	border-radius:8;
}
#config input
{
	width:100%;
	background:transparent;
	border:0;
	outline:none;
}

Codice completo pagina di esempio [fatta velocemente]

Codice HTML:

<!DOCTYPE html>
<meta charset='utf-8'>
<title>Cronometro Allenamento</title>
<script>
WebFontConfig = {
    google: { families: [ 'Fredoka+One::latin' ] }
};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();
var tipe;
var tipe2;
var tipe3;
var si = setInterval();
clearInterval(si);
function start()
{
	var sore = document.getElementById('sore').value;
	var smin = document.getElementById('smin').value;
	var ssec = document.getElementById('ssec').value;
	var story = sore + ";" + smin + ";" + ssec;
	con(0,0,0,story);
	var toggle = document.getElementById('start');
	toggle.style.display == "none" ? toggle.style.display = "inline" : toggle.style.display = "none";
	var toggle = document.getElementById('tpl');
	toggle.style.display == "none" ? toggle.style.display = "inline" : toggle.style.display = "none";
}
function con(sec,min,ore,end)
{
	
	si = setInterval(function()
	{
		//fine
		var fine = end.split(';');
		var fn = document.getElementById('fine').innerHTML= null;
		if(ore == fine[0] && min == fine[1] && sec == fine[2])
		{
			clearInterval(si);
			document.getElementById('sec').innerHTML= null;
			document.getElementById('min').innerHTML= null;
			document.getElementById('ore').innerHTML= null;
			document.getElementById('s').value = 0;
			document.getElementById('m').value = 0;
			document.getElementById('o').value = 0;
			ore = 0;
			min = 0;
			sec = 0;
			var fn = document.getElementById('fine').innerHTML= "Allenamento finito!";
			var toggle = document.getElementById('start');
			toggle.style.display == "none" ? toggle.style.display = "inline" : toggle.style.display = "none";
			var toggle = document.getElementById('tpl');
			toggle.style.display == "none" ? toggle.style.display = "inline" : toggle.style.display = "none";
		}
		var switchC = document.getElementById('tco').value;
		switch(switchC)
		{
			case 'Time Up':
				sec = parseInt(sec)+1;
				if(sec == 1) tipe = 'secondo';
				else if(sec <= 59)tipe = 'secondi';
				else if(sec > 59 )
				{
					min = parseInt(min)+1;
					sec = 0;
				}
				if(min == 1) tipe2 = 'minuto';
				if(min > 1 && min <= 59) tipe2 = 'minuti';		
				if(min > 60)
				{		
					ore = parseInt(ore)+1;
				}
				var c = document.getElementById('sec').innerHTML= sec + " " + tipe;
				if(min > 0)
				{
					var sm = document.getElementById('min').innerHTML= min + " " + tipe2;
				}
				if(ore == 1) tipe3 = 'ora';
				if(ore > 1 ) tipe3 = 'ore';
				if(ore > 0)
				{
					var sm = document.getElementById('ore').innerHTML= ore + " " + tipe3;
				}
				
				document.getElementById('s').value = sec;
				document.getElementById('m').value = min;
				document.getElementById('o').value = ore;
			break;
			case 'Countdown':
			break;
		}
	},1000);
}
function pause()
{
	clearInterval(si);
	toggle();
}
function play()
{
	var s =	document.getElementById('s').value;
	var m = document.getElementById('m').value;
	var o = document.getElementById('o').value;
	var sore = document.getElementById('sore').value;
	var smin = document.getElementById('smin').value;
	var ssec = document.getElementById('ssec').value;
	var story = sore + ";" + smin + ";" + ssec;
	con(s,m,o,story);
	toggle();
}
function toggle()
{	
	var toggle = document.getElementById('tpl');
	toggle.style.display == "none" ? toggle.style.display = "inline" : toggle.style.display = "none";
	var toggle = document.getElementById('tpa');
	toggle.style.display == "none" ? toggle.style.display = "inline" : toggle.style.display = "none";
}
function switchC()
{
	var switchC = document.getElementById('tco');
	switchC.value == 'Time Up' ? switchC.value = 'Countdown' : switchC.value = 'Time Up';
}	
</script>
<style>
body
{
	margin:0;
	background:#dedede;
}
#container
{
	width:400;
	margin:auto;
}
header
{
	padding:10;
	width:100%;
	position:relative;
	background:#242424;
	border-bottom:1px solid #111;
}
#ch
{
	width:50px;
	margin:auto;
}
#box
{
	margin-top:50%;
	padding:20;
	background: #59A6D6;
	border:1px solid #1D8DD3;
	border-radius:8;
}
button
{
	width:100%;
	padding:20;
	font-family:Fredoka One;
	
}
#sec,#min,#ore,#fine
{
	text-align:center;
	padding:10;
	font-size:40;
	color:#153D9B;
	font-family:Fredoka One;
}
#config
{
	font-family:Fredoka One;
	width:50;
	position:absolute;
	margin-top:0;
	margin-left:-100;
	padding:20;
	background: #59A6D6;
	border:1px solid #1D8DD3;
	border-radius:8;
}
#config input
{
	width:100%;
	background:transparent;
	border:0;
	outline:none;
}
</style>
<header>
	<div id='ch'>
		<a href='http://measprache.altervista.org/' target='_blank' title='Mea Sprache home page.'><img src='http://measprache.altervista.org/img/logo.png'/></a>	
	</div>
</header>
<div id='container'>
	<div id='config'>
		Ore<input type='number' id='sore' value=0>
		Min<input type='number' id='smin' value=20>
		Sec<input type='number' id='ssec' value=0>
		<input type='text' id='tco' value='Time Up' disabled/>
		<!--<button id='switchC' onclick='switchC()'>Switch</button>-->
	</div>
	<div id='box'>
		<button id='start' onclick='start()'>Inizia</button>
		<button onclick='pause()' id='tpl'style='display:none'>Pausa</button>
		<button onclick='play()' id='tpa' style='display:none'>Play</button>
		<input type='hidden' id='m'>
		<input type='hidden' id='s'>
		<input type='hidden' id='o'>
		<div id='sec'></div><div id='min'></div><div id='ore'></div><div id='fine'></div>
	</div>
</div>

**karl94** · 29-03-2014, 02.15.35

Non usando la dichiarazione di DOCTYPE, i browser renderizzano le pagina usando una modalità che non segue gli standard, quindi Sì, il tuo codice non segue gli standard. Per esempio noto che molte larghezze, spaziature e altre misure non riportano l'unità di misura, comincerei a correggere quelle, aggiungendo l'unità di misura px immediatamente dopo il numero.

29-03-2014, 02.57.09

Oh, grazie, vedrò di seguire le regole allora!

30-03-2014, 13.39.00

Un problema non potrebbe essere anche la mancanza dei tag html, head e body?

**karl94** · 30-03-2014, 17.05.50

No, perché i moderni browser supportano le regole di parsing definite nello standard HTML5, il quale definisce in maniera dettagliata gli algoritmi per il caricamento dei documenti che mancano anche dei tag sopra citati.
Ad ogni modo io consiglierei di includerli, anche perché aiuta a tenere il tutto più ordinato, e di fatto vengono trattati come errori, anche se aggiustati.

Discussione: Curiosità codice CSS con il DOCTYPE html

LinkBack

Strumenti discussione

Display

Curiosità codice CSS con il DOCTYPE html

Regole di scrittura