Chào tất cả mọi người.
Hôm nay chúng ta sẽ nói về khả năng trình duyệt và
những gì bạn có thể làm để đảm bảo rằng các trang web của bạn có diện mạo nhất quán,
bất kể mọi người đang truy cập nó như thế nào.
Vì vậy, mặc dù HTML5 đã thực sự đẩy các nhà phát triển trình duyệt
để tất cả đi đến thực hiện nhất quán này, họ thực sự khác nhau về hiển thị và
tuân thủ các thẻ mới đang ra mắt.
Và khi trình duyệt cập nhật và thay đổi và trình duyệt mới xuất hiện, bạn sẽ phải
ghi nhớ rằng không phải tất cả mọi người đều nhìn vào trang của bạn giống như bạn đang ở.
Vì vậy, trách nhiệm của bạn là đảm bảo rằng trang của bạn hoạt động cho một đối tượng rộng.
Và trong khi chúng tôi đã nói rất nhiều về khả năng truy cập, và
các cách khác nhau để truy cập web, nó thậm chí còn đi xuống đến các triển khai trình duyệt cơ bản nhất.
Vì vậy, trước tiên, chúng ta hãy nói về việc xử lý những khác biệt phong cách này.
Cách dễ nhất để loại bỏ sự khác biệt của trình duyệt là
để bạn tạo một cái gì đó được gọi là bảng kiểu mặc định.
Và trong bảng phong cách đó, bạn sẽ thực sự đi vào và
xóa bỏ bất kỳ mặc định trình duyệt cho các yếu tố khác nhau được tạo kiểu.
Vì vậy, khi bạn vào và bạn thực hiện nó, bạn sẽ lấy, P, H1, H2, tất cả các tiêu đề,
tất cả các thẻ ngữ nghĩa khác nhau và bạn sẽ đi vào và bạn sẽ nói,
tôi muốn chúng có đệm bằng 0 và lề bằng 0.
Ngay cả danh sách các mục của tôi cũng không nên có bất kỳ trang trí ở tất cả.
Vì vậy, trong khi điều này sẽ đảm bảo rằng bạn có một cái nhìn rất nhất quán,
tôi phải thừa nhận nó sẽ làm cho bạn trang trông hoàn toàn khủng khiếp.
Nhưng đó là mức giá bạn sẽ phải trả để
khi bạn bắt đầu viết các quy tắc tạo kiểu của riêng bạn, bạn có thể cải thiện và
chắc chắn cải thiện và trang của bạn sẽ trông tốt hơn và tốt hơn. Nếu
không, nếu bạn không sử dụng những gì chúng tôi gọi là bảng phong cách mặc định này,
bạn sẽ thiết kế trang của bạn, và nó sẽ được thực sự khó khăn cho
bạn để nhớ nếu bạn đã thực sự kiểm tra ra từng phần tử mà bạn đang sử dụng.
Một trong những điều khác chúng tôi muốn nói về là xử lý những gì chúng tôi gọi là các
thuộc tính không được hỗ trợ.
Vì vậy, trước tiên, chúng ta biết rằng tất cả các trình duyệt không hỗ trợ tất cả các thẻ HTML5.
Bạn đã thấy điều này, trong một số mã hóa bạn đã làm với tôi.
Trong cùng một cách, không phải tất cả các trình duyệt đều hỗ trợ tất cả các thuộc tính CSS3.
Có một số thuộc tính trông thực sự mát mẻ trên một số trình duyệt, nhưng
chúng không được xử lý theo mặc định trong các trình duyệt khác.
Nhưng có một cách xung quanh điều đó trong nhiều trường hợp.
Và điều này là, các trình duyệt đang cung cấp tiền tố.
Vì vậy, đôi khi họ gọi chúng là tiền tố trình duyệt, đôi khi là tiền tố của nhà cung cấp, nhưng
điều quan trọng là nó là một sửa chữa thực sự nhanh chóng để
xử lý tất cả các tùy chọn không được hỗ trợ mà bạn có thể đi qua.
Bây giờ, khi tôi lần đầu tiên nhìn thấy tiền tố trình duyệt, tôi hoàn toàn bị đe dọa.
Tôi không biết chuyện gì đang xảy ra, và nó có vẻ hơi kỳ quặc,
và tôi cảm thấy lười biếng và tôi không muốn đối phó với nó.
Nhưng tôi ở đây để nói với các bạn, nó thực sự rất, rất dễ dàng để sử dụng các tiền tố này.
Vì vậy, chúng ta hãy nhìn vào những gì tôi đang nói.
Bạn đã sử dụng các thuộc tính khác nhau và trình duyệt hy vọng chỉ hoạt động.
Nhưng bây giờ, đối với một số thuộc tính đó, bạn sẽ muốn và thêm một tiền tố hoặc
một chút ở phía trước của nó, chẳng hạn như webkit, moz, ms, hoặc o cho Opera.
Mỗi một trong những tiền tố này nói, hey, nếu bạn đang ở trên trình duyệt cụ thể
này, đây là những gì tôi cần bạn làm để có được cái nhìn mà nhà thiết kế sẽ cho.
Vì vậy, một số trong những thuộc tính này thường không được hỗ trợ là gì?
Chúng bao gồm số cột
, là một cách để thêm nhiều cột vào đoạn văn hoặc divs của bạn.
Đó là một cách thực sự tốt đẹp để chia sẻ văn bản của bạn có phản hồi.
Vì vậy, nếu ai đó thay đổi kích cỡ trang, các đoạn văn thực sự thay đổi kích cỡ.
Chúng tôi có một thứ khác gọi là bán kính biên giới, mà mọi người thực sự thích
sử dụng bởi vì nó thêm một cạnh tròn nhỏ vào biên giới của các yếu tố của bạn.
Một lựa chọn thứ ba sẽ là gradient.
Và gradient là một loại rất mát mẻ của màu nền cho phép màu sắc đi
từ một bóng của màu xanh đến có thể màu xám hoặc đỏ hoặc bất cứ điều gì tương tự.
Và nó mang lại cho nó một sự xuất hiện khác nhau.
Bây giờ không có cách nào
để bạn thực sự biết những thuộc tính được hỗ trợ và những thuộc tính nào không được.
Vì vậy, tôi có liên kết này ở đây đến một trang web được gọi là caniuse.com.
Và những gì caniuse.com làm là nó liệt kê các thuộc tính khác nhau và
nó cho bạn biết trình duyệt nào hỗ trợ chúng và trình duyệt nào cần các tiền tố.
Vì vậy, bạn nên kiểm tra trang web đó khi bạn bắt đầu phát triển trang của mình.
Nhưng bây giờ, chúng ta hãy đi trước và nhìn vào một ví dụ.
Vì vậy, trong ví dụ này, tôi có một tập tin gọi là prefixes.html.
Và tôi chỉ muốn cho bạn thấy nó trông như thế nào trên cả Chrome ở đây,
và trên Safari.
Trông chúng khá giống nhau.
Nhưng có rất ít không gian mà phông chữ có thể không khớp chính xác, hoặc
một số khoảng cách có thể không khớp chính xác.
Vì vậy, nếu tôi muốn thoát khỏi điều đó, nếu tôi thực sự muốn đảm bảo rằng
các trang trông giống hệt nhau, những gì tôi có thể làm là thêm một bảng kiểu mặc định.
Vì vậy, chúng ta hãy đi xuống đây, và
tôi sẽ nói hey tôi muốn sử dụng bảng phong cách mặc định của tôi.
Và những gì trông giống như nó là một tập tin thực sự điên rồ nơi tôi đã liệt kê
tất cả các yếu tố khác nhau.
Và sau đó, đặt vào những thứ như,
tôi không muốn bất kỳ đệm nào, tôi không muốn bất kỳ lề nào.
Nếu tôi có danh sách, hãy loại bỏ phong cách danh sách.
Làm cho nó thực sự xấu xí như bạn có thể.
Vì vậy, nếu tôi quay trở lại đây, bạn có thể không thấy một sự khác biệt lớn bởi vì các trình duyệt
đã khá đơn giản, nhưng bạn có thể thấy mọi thứ di chuyển qua một chút.
Chúng ta sẽ loại bỏ một ít thứ.
Và trong cùng một cách, khi tôi làm mới Safari,
chúng sẽ trông giống nhau hơn một chút.
Vì vậy, bây giờ, chúng ta hãy đi trước và
nhìn vào ví dụ mà một số thuộc tính không được hỗ trợ.
Và tôi sẽ quay trở lại tập tin HTML của tôi, và tôi sẽ nói, hey, tôi muốn
sử dụng bảng phong cách của tôi để đi trước và phong cách một số điều mà không phải lúc nào cũng được hỗ trợ.
Và những điều mà tôi đang nói cụ thể là,
chúng ta sẽ bắt đầu với ý tưởng về số cột.
Làm thế nào đếm cột và khoảng cách cột hoạt động là bạn cho trình duyệt biết có
bao nhiêu cột bạn muốn và bao nhiêu không gian bạn muốn giữa các cột đó.
Vì vậy, bây giờ, khi tôi làm mới, bạn có thể thấy nó đã biến mất từ
tất cả một đoạn văn khối kinda dài đến rằng tất cả mọi thứ được chia ra.
Và nó thực sự tuyệt vời bởi vì nó rất năng động.
Nếu tôi thay đổi kích thước trình duyệt, mọi thứ đều di chuyển xung quanh.
Và đây là một cách thực sự tuyệt vời để làm điều đó.
Một trong những điều khác tôi muốn thêm giống như một cái gì đó để nhìn vào, là ý tưởng này
thay vì có một hình vuông, tôi muốn làm tròn các cạnh một chút.
Vì vậy, bạn làm điều đó bằng cách thêm vào những gì được gọi là bán kính biên giới.
Bây giờ tôi sẽ dừng lại trước khi tôi làm mới trang này, vì tôi muốn chỉ ra điều gì đó cho
anh trong trường hợp anh bị đe dọa như tôi lần đầu tiên bắt đầu làm việc này.
Bán kính biên giới chỉ là một tài sản đơn giản đã tồn tại trong một thời gian.
Và bạn có thể thấy nó ngay tại đây, và bạn cho nó một giá trị.
Tương tự với số cột và khoảng cách cột.
Toàn bộ ý tưởng về việc thêm tiền tố chỉ có nghĩa là, lấy tài sản thông thường của bạn và
tát các tiền tố này lên đó.
Bạn không cần phải học bất cứ điều gì mới, bạn chỉ cần nhớ tên tiền tố.
Và vì vậy tôi muốn bạn thực sự cố gắng nắm lấy điều này, và
nhận ra rằng bạn không làm bất cứ điều gì quá ngoạn mục.
Vì vậy, bây giờ tôi đã làm điều này, tôi đã làm nó 25.
Và tôi sẽ tiếp tục làm mới nó.
Và như các bạn có thể thấy, tôi đã làm cong các cạnh khác nhau xung quanh một bên,
điều này khá tuyệt vời.
Điều cuối cùng tôi sẽ làm là thêm một gradient vào màu sắc.
Vì vậy, ngay bây giờ tôi là một màu xanh nhất quán.
Và điều quan trọng là không có vấn đề gì bạn cung cấp cho một loại màu nền,
mà bạn muốn được sử dụng, là trường hợp gradient không xảy ra.
Nhưng bây giờ đối với gradient tuyến tính, bạn chỉ đơn giản là đưa ra hai màu sắc mà bạn muốn được
nhìn thấy và loại nói bao nhiêu bạn muốn ở đầu và cuối.
Vì vậy, một lần nữa, tôi có màu xanh thường xuyên.
Và bây giờ khi tôi làm mới, tôi đi từ một màu xanh sang một loại màu xám nhạt.
Đây là mát mẻ và nó là rất nhiều mã và nó là rất nhiều niềm vui để chơi với nó.
Nên tôi muốn nhắc các bạn rằng khi các bạn đang phát triển, đừng cố gắng ghi nhớ mọi thứ.
Đừng cố nhớ làm thế nào để làm tất cả mọi thứ.
Tôi sẽ nhấp chuột phải vào đây, và làm Inspect Element.
Bởi vì nếu bạn quyết định sau đó là quá nhiều của một đường cong, hoặc bạn không thích
màu đó, những gì bạn không muốn làm là gõ, lưu, làm mới, nhập, lưu, làm mới.
Nó rất khó chịu.
Vì vậy, thay vào đó, tôi sẽ đi ngay đây để phần của tôi và tôi sẽ xem xét,
và bạn có thể nhìn thấy trong Inspect Element rằng nó nói tôi không sử dụng tiền tố moz, và
tôi đã không sử dụng tiền tố Opera, vì tôi không cần phải.
Tôi là Chrome.
Điều tôi có thể làm là xuống đây tới bán kính biên giới và thay đổi nó.
Thay vì 25 pixel, nếu tôi muốn ít hơn một đường cong, tôi có thể làm cho nó 5 pixel.
Bạn có thể thấy nó xảy ra trong thời gian thực.
Nếu bạn muốn làm cho nó trông điên rồ, bạn có thể làm cho nó 50 điểm ảnh.
Bạn cũng có thể sử dụng phần trăm nếu bạn thích.
Vì vậy, tôi sẽ đi trước và đặt vào 15%.
Vì vậy, nó kinda để chơi với tất cả những điều này động và sau đó một
khi bạn nhận được một giá trị mà bạn thực sự thích, sao chép nó và đặt nó vào tập tin CSS của bạn.
Vì vậy, tiền tố trình duyệt chỉ là một cái gì đó để chơi với đó có thể được vui vẻ.
Nó có thể là bực bội.
Nhưng điều quan trọng nhất là bạn nên nhận ra nó rất đơn giản.
Một trong những điều bạn có thể làm khi bạn đang thêm tiền tố là nhận ra,
ngay bây giờ, điều dễ dàng nhất để bạn làm là thêm những tiền tố đó bằng tay.
Đặt vào tài sản mà bạn muốn đưa vào, nói bán kính biên giới.
Và sau đó đi vào và thêm webkit, moz, những thứ khác nhau như thế.
Khi bạn bắt đầu sử dụng tiền tố,
những gì bạn sẽ làm là bạn sẽ thêm chúng bằng tay.
Nếu bạn biết rằng bạn có bán kính biên giới, bạn sẽ đi trước và làm bán kính biên giới
và sau đó thêm rằng moz, webkit, những thứ khác nhau như thế bằng tay.
Khi bạn trở nên có kinh nghiệm hơn và có thể bạn muốn thử những thứ khác nhau,
có nhiều cách để tự động hóa việc bổ sung các tiền tố đó.
Nếu bạn đang sử dụng một trình soạn thảo như Sublime,
bạn có thể thực sự đặt các gói nhỏ trên đó, nơi bạn có thể kiểm soát xem
bạn có muốn Sublime thêm vào các gói bất cứ khi nào họ nhìn thấy các thuộc tính khác nhau hay không.
Bạn cũng có thể sử dụng các chương trình bên ngoài sẽ tự động thay đổi mã của bạn
khi mọi người tải nó để chỉ đưa vào các tiền tố mà họ cần.
Nếu bạn nhớ trong ví dụ của tôi, mặc dù tôi đang sử dụng Chrome,
bảng phong cách của tôi vẫn có tất cả các tiền tố khác nhau.
Điều này sẽ tự động chỉ thêm những cái bạn cần.
Một lần nữa, đây là loại tuyệt vời, nhưng chúng ta đừng lo lắng về chúng ngay bây giờ.
Bây giờ, chúng ta hãy tập trung vào những điều cơ bản.
Vì vậy, để xem xét, khi bạn bắt đầu mã hóa,
khi bạn bắt đầu tạo bảng kiểu, bạn sẽ muốn
suy nghĩ về việc sử dụng một bảng kiểu mặc định để loại bỏ những khác biệt về phong cách.
Và khi bạn làm điều đó, tôi cần bạn suy nghĩ về một số điều.
Vì vậy, trước tiên, nên bảng kiểu mặc định đó là nội bộ hay bên ngoài?
Và hy vọng tất cả các bạn nói bên ngoài.
Bởi vì nếu nó là nội bộ,
nó sẽ ghi đè lên tất cả những thứ khác mà bạn đã làm việc rất chăm chỉ để làm.
Tương tự như vậy, khi bạn đặt một liên kết đến trang kiểu mặc định của mình,
hãy đảm bảo nó là đầu tiên.
Bởi vì cách các trình duyệt làm việc là nó đi phong cách bảng, bảng phong cách, bảng phong cách.
Vì vậy, nếu bạn đặt của bạn đầu tiên và sau đó là bảng phong cách mặc định,
nó sẽ ghi đè lên tất cả mọi thứ tuyệt vời mà bạn đã làm cho đến nay.
Cuối cùng, hãy nhớ rằng tiền tố trình duyệt
có thể giúp loại bỏ một số khác biệt do các tùy chọn không được hỗ trợ gây ra.
Nhưng anh không muốn sử dụng nó quá mức.
Đừng tát một tiền tố trên mỗi tài sản duy nhất chỉ vì bạn không chắc chắn.
Thay vào đó, bạn muốn đi đến những trang web như tôi có thể sử dụng và kiểm tra nó ra và
thực sự đưa ra một giáo dục đoán xem bạn có muốn sử dụng nó hay không.
Bạn đang thực sự đi xa trong toàn bộ ý tưởng phát triển web này.
Và hy vọng bạn đang tạo kiểu một số trang thực sự tuyệt vời.
Và tôi muốn bạn có thể sử dụng tất cả các đặc tính khác nhau ở ngoài kia.
Vì vậy, không bị đe dọa bởi ý tưởng rằng bạn có thể phải sử dụng các bảng kiểu mà
bạn chưa viết hoặc bạn phải sử dụng tiền tố trình duyệt.
Bạn đã hoàn toàn có điều này và tôi biết rằng bạn có thể mã bằng cách sử dụng các công cụ khác nhau.
Chúc may mắn.