Sự khác biệt trong style {background: linear-gradient()} trong HTML và HTML5

Thao_Hien_Tran · March 31, 2019, 2:24pm

cho tui hỏi cái này dòng lệnh này bên html và html5 khác nhau chỗ nào???
Capture1
Vì khi viết bằng html5 dòng lệnh này k chạy đc??? bác nào biết giúp tui với, cảm ơn nhiều!!

Thao_Hien_Tran · March 31, 2019, 2:22pm

kq khi viết bằng html5

Thao_Hien_Tran · March 31, 2019, 2:23pm

kết quả viết bằng html

drgnz · March 31, 2019, 2:50pm

Cho mình xin 2 đoạn code html5 vs html đc không?

Thao_Hien_Tran · March 31, 2019, 3:12pm

gist.github.com

https://gist.github.com/thaohien98/1fc99431ec3fdd994b952a6d9ce2dcb5

index.html

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script>
		function insert(num){
			document.form.textview.value = document.form.textview.value + num;
		}
		function equal() {
			var exp = document.form.textview.value;
			if (exp) {

This file has been truncated. show original

Đây bạn!! cái trên mình viết bằng html còn html5 thì thêm !DOCTYPE html ở đầu thui à mà nó k chạy ra

hungaya · March 31, 2019, 3:44pm

Sau khi dùng browser inspector thì phát hiện, nhưng không biết giải thích tại sao. :v

Nếu có <!DOCTYPE html>: giá trị computed property của height của <html> bằng 0, kéo theo height của <body> bằng 0. Do đó, height của .bg cũng bằng 0.

Nếu không có <!DOCTYPE html>: height của <html> bằng browser height, nên height của .bg cũng bằng browser height.

drgnz · March 14, 2020, 8:38am

Hung giải thích rồi, background của bạn có height = 0 nên nó không hiện ra. Còn lý do thì

>> <!DOCTYPE html>
Khi khai báo DOCTYPE, browser sẽ render code HTML của bạn theo chuẩn của W3C.

Còn nếu bỏ đi, thì sẽ chuyển sang một mode khác. Gọi là Quirk Mode, tức sẽ cso những spec riêng cho nó. Quirk Mode là mode cho các browser cũ ngày xưa xửa xưa, khi đó ai làm browser là ra 1 standard riêng, khi chưa có một chuẩn chung cách render một trang web. => Không có doctype. Nên vì vậy có một vài spec không quy định rằng nếu parent có height = auto thì thằng con sẽ có height = auto nốt (như chuẩn HTML5 hiện tại).

-> Việc bạn set height = 100% thế kia được là vì hồi trước ngta cho phép như vậy. Còn bây giờ thì không. Muốn làm thì phải set height cho body, html hoặc parent của nó thành 100% hết mới được.

html, body {
 height: 100%;
}

Thao_Hien_Tran · March 31, 2019, 4:13pm

Ohhh!!! đã thông não rùi cảm ơn mọi người đã giúp đỡ