Hướng dẫn cách hack CSS khi bạn làm web 2.0 (Firefox, IE7,8, Opera..)

[Văn Hiển]

Làm sao để website bạn dựng bằng CSS & DIV chạy được trên mọi trình duyệt, trong khi mỗi trình duyệt có một kiểu hiển thị khác nhau.

Tôi đã phải nhức đầu vì chỉnh được ở Firefox thì Internet Explorer chạy sai, chạy được 2 cái này thì Safari dở chứng.

Tôi tổng hợp lại một số kinh nghiệm để các bạn tiết kiệm thời gian khi làm việc, vì thông tin trên internet thì bao la, nhưng ứng dụng để làm sao cho nhanh gọn, môĩ khi cần tra cứu dễ dàng thì hơi mệt.

Bạn xem slide trực tiếp ở đây
http://docs.google.com/Present?docid=dg37rt3b_2263982gdfz

Bạn bấm vào liên kết
View published presentation in a new window để xem.
Chúc bạn sẽ làm tốt phần việc của mình!

[=========> Bổ sung bài viết <=========]

bạn bấm vào slide để nó chuyển sang trang kế tiếp sẽ dễ dàng hơn so với bấm vào các button ở dưới. tôi sẽ cập nhật thêm, bạn có thể xem bản cập nhập vẫn theo liên kết này.

lần đầu tiên soạn slide theo dạng này nên chưa đẹp lắm, bạn thông cảm nhé!

[phongjalvn]

Nói chung là biết hết rồi, nhưng dù sao cũng thanks :D
Nhưng thật sự thì không cần quá nhiều CSS hack đâu.
Thật sự CSS có rất nhiều cách để giải quyết 1 vấn đề, hãy thử thay đổi 1 chút trước khi nghĩ đến việc sử dụng css hack ( vì đa phần đều invalid, đa phần thôi nhé )

[2_lua_IT]

Phongjalvn biết để mà tránh thôi. hihi. Nếu biết đến hack thì coi như có biện pháp khắc phục nên khỏi dùng hack, hehe. Phải kô pác ?

[Văn Hiển]

Nói chung là biết hết rồi, nhưng dù sao cũng thanks :D
Nhưng thật sự thì không cần quá nhiều CSS hack đâu.
Thật sự CSS có rất nhiều cách để giải quyết 1 vấn đề, hãy thử thay đổi 1 chút trước khi nghĩ đến việc sử dụng css hack ( vì đa phần đều invalid, đa phần thôi nhé )

Đây chỉ là cách nói thôi, các thủ thuật ở đây có thể coi tips& tricks thì đúng hơn, chỉ có duy nhất một trường hợp là không valid (đã ghi rõ trong file), còn lại thì đều valid hết mà.



Nếu biết đến hack thì coi như có biện pháp khắc phục nên khỏi dùng hack, hehe. Phải kô pác ?
Thật ra thì hạn chế càng nhiều càng tốt, nhưng trong một số trường hợp đặc biệt (chẳng hạn tớ có quá ít thời gian) thì đành phải dùng, chứ không phải lúc nào cũng tránh xa, vì một số phần, nếu khong có những mẹo nhỏ nhỏ như thế này thì không làm được. tớ chỉ muốn gom nó lại cho các bạn dễ kiếm, thay vì mỗi lần làm lại phải đi kiếm thì mệt quá

Các thủ thuật valid đi nữa thì cũng có thể gọi là hack rồi, nếu bạn nào làm CSS nhiều chắc không xa lạ với

<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

Thủ thuật này valid, nhưng vẫn coi là hack muh, phải hum?

[2_lua_IT]

Hack min height kô đúng rồi bạn ơi, chỉ đúng trên IE6 thôi vì IE6 support min-height mà. Test lại đi bạn ơi.
Thuộc tính :
display:table; /*for firefox*/
*display: block; /* for IE5.x and IE6 */
Comment kiểu này hình như là hơi bị mất căn bản.

[0988338837]

hãy vào mục css của thietkewebsitegiare.wordpress.com đọc cơ bản về CSS

[phongjalvn]

<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

Valid, không phải hack

[Văn Hiển]

<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

Valid, không phải hack


CSS Hacks are a recommended way of dealing with CSS stylesheet interpretation inconsistencies. CSS Hacks are generally targetted at IE, which has the largest market share but relatively poor CSS standards support in the versions 5 and 6 that are in common use.
Tại đây (http://swik.net/hacks?popular)

Conditional comments – the benefit of these is that they are officially recommended by Microsoft, the downside is that they are only available in HTML and cannot be used in CSS directly. They also require the use of a non-standard extension to HTML created by Microsoft and will only work in IE or browsers that use the IE rendering engin


Và một số thông tin từ Microsoft (http://msdn.microsoft.com/en-us/library/ms537512.aspx)

[phongjalvn]

Yes, đồng ý là non-standard, nhưng khi các validator check sẽ vẫn là valid, vì sao ?
Bản thân <!-- Content --> chỉ là 1 dạng comment trong HTML, hết. Vì thế khi bạn viết
<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->
hoàn toàn valid.

They also require the use of a non-standard extension to HTML
Có lẽ bạn hiểu lầm phần này chăng, đúng là nó nói sử dụng 1 thành phần không thuộc về HTML, nhưng thực sự cấu trúc của nó vẫn là HTML ( chỉ phần sử lý là không thuộc HTML thôi nhé )

[0988338837]

Vào Blog CSS (http://thietkewebsitegiare.wordpress.com/) là có hết

[blueflames]

Theo tớ thì nếu làm đúng theo chuẩn quốc tế strict thì dường như việc valid lại hay hack css là không cần thiêt, tờ thường sử dụng chuẩn strict cho XHTML. Khỏe ! Tuyệt đối không xái tới table trừ trường hợp bất khả kháng !

[hellangle381]

blueflames lầm rồi sao lại ko dùng table nhĩ, vậy để hiển thị dữ liệu dạng bảng thì ko dùng table luôn àh :D

[superthin]

blueflames lầm rồi sao lại ko dùng table nhĩ, vậy để hiển thị dữ liệu dạng bảng thì ko dùng table luôn àh :D

Lão đó đã thòng thêm câu "Tuyệt đối không xái tới table trừ trường hợp bất khả kháng !" rồi cơ mà. Dữ liệu dạng bảng thì dùng table chứ. Chỉ là tránh dùng Table để layout trang web thôi, còn cần một bảng dữ liệu mà dùng DIV cả thì có mà... điên.