Nếu bạn nằm trong giới thương mại thiết kế web từ giữa những năm 1990, bạn sẽ nhớ rằng trước đó, tất cả các mẫu thiết kế được dựa trên bảng và phong cách đã được gắn chặt với nội dung.
Cascading Style Sheets (CSS) đã được giới thiệu như là một cách tách từ thiết kế nội dung. Phải mất một khoản thời gian để thiết kế web bước vào thế giới mang đậm kỹ thuật thiết kế dựa trên CSS nhưng các trang web như http://www.csszengarden.com mở đường, thấy chỉ là những gì có thể đạt được, trực quan, với một thiết kế dựa trên CSS. Kể từ đó, CSS đã trở thành phương pháp chuẩn xác định các lớp presentational của một trang web, với CSS 2.1 là phiên bản được phê duyệt hiện tại của đặc tả CSS. CSS3 vẫn chưa được phê chuẩn đầy đủ nhưng điều đó không có nghĩa là phần lớn của nó không phải là hoàn toàn có thể sử dụng ngày hôm nay.
W3C làm việc nhóm lưu ý ở http://www.w3.org/TR/CSS/ # css3is như sau:
CSS Cấp 3 được xây dựng trên CSS Cấp 2 mô-đun bằng mô-đun, bằng cách sử dụng CSS2.1 đặc điểm kỹ thuật như cốt lõi của nó. Mỗi mô-đun bổ sung thêm chức năng và / hoặc thay thế một phần của CSS2.1 đặc điểm kỹ thuật. Nhóm công tác CSS dự định rằng các mô-đun CSS mới sẽ không mâu thuẫn với các đặc điểm kỹ thuật CSS2.1: chỉ rằng họ sẽ thêm chức năng và tinh chỉnh các định nghĩa.
Phần lớn các đặc điểm kỹ thuật W3C dự thảo lần đọc (bởi sự cần thiết) như legalese. trong đơn giản điều khoản, điều quan trọng với chúng tôi là CSS3 được xây dựng như một bộ 'bolt-on' mô-đun hơn một tổng thể hợp nhất duy nhất. Như CSS 2.1 là cốt lõi, không có kỹ thuật mà bạn sử dụng với CSS 2.1 hôm nay đang bị bỏ rơi. Thay vào đó, nhất định, mô-đun trưởng thành hơn (như không tất cả các mô-đun ở cùng một nhà nước sẵn sàng) của CSS3 có thể được chủ động sử dụng ngày hôm nay, mà không cần chờ đợi cho toàn bộ đặc điểm kỹ thuật được phê chuẩn.
Phía dưới dòng CSS3 sẽ không phá vỡ bất cứ điều gì! Có lẽ là điểm quyền năng nhất của lưu ý là không có hình phạt trong cũ trình duyệt cho bao gồm cả tài sản mà họ không hiểu. các trình duyệt cũ (kể cả Internet Explorer 6, 7, và 8) hạnh phúc sẽ bỏ qua các thuộc tính CSS3 rằng họ không thể xử lý. Điều này cho phép chúng ta khả năng để dần dần nâng cao khu vực của một thiết kế cho các trình duyệt trang bị tốt hơn, trong khi đảm bảo một mùa thu hợp lý trở lại cho những người lớn tuổi.
Làm thế nào có thể giải quyết CSS3 thiết kế hàng ngày
vấn đề?
Chúng ta hãy xem xét một trở ngại thiết kế phổ biến tất cả chúng ta phải đối mặt trên hầu hết các dự án để tạo ra một góc tròn trên một thành phần màn hình, có lẽ đối với một giao diện tab hoặc góc của một đóng hộp thành phần như tiêu đề ví dụ. Sử dụng CSS 2.1 này có thể đạt được bằng cách sử dụng một doorstechnique trượt (http://www.alistapart.com/articles/ slidingdoors /), trong đó một hình nền nằm sau khác. HTML có thể nhìn đơn giản như sau:
a {
display: block;
height: 40px;
float: left;
font-size: 1.2em;
padding-right: 0.8em;
background: url(images/headerRight.png) no-repeat scroll top right;
Getting Started with HTML5, CSS3, and Responsive Web Design
[26 ]
}
a span {
background: url(images/headerLeft.png) no-repeat;
display: block;
line-height: 40px;
padding-left: 0.8em;
}
Nó giải quyết các vấn đề thiết kế nhưng đòi hỏi phải đánh dấu bổ sung (ngữ nghĩa thành phần không có giá trị) và hai yêu cầu HTTP bổ sung (đối với các hình ảnh) đến máy chủ để tạo hiệu ứng trên màn hình. Bây giờ, chúng ta có thể kết hợp hai hình ảnh thành một để tạo ra một ma và sau đó sử dụng background-position: thuộc tính CSS chuyển nó xung quanh nhưng ngay cả với các nền kinh tế băng thông cung cấp, nó vẫn là một giải pháp linh hoạt. Điều gì xảy ra nếu khách hàng quyết định họ muốn các góc để có một bán kính chặt chẽ hơn? Hoặc một màu sắc khác nhau? Chúng ta cần phải làm lại hình ảnh của chúng tôi (s) một lần nữa. Đáng buồn thay, cho đến khi CSS3, điều này đã được thực tế của tình hình chúng ta, những nhà thiết kế lối vào và các nhà phát triển đã tìm thấy chính mình in Thưa quý ông, tôi đã nhìn thấy tương lai, và nó CSS3 hình! Chúng ta hãy sửa đổi HTML để chỉ:
Và để bắt đầu với, CSS có thể trở thành như sau:
một {
float: left;
chiều cao: 40px;
line-height: 40px;
padding-left: 0.8em;
padding-ngay: 0.8em;
biên giới-top-trái-bán kính: 8px;
cửa trên bên phải-bán kính: 8px;
background-image: url (images / headerTiny.png);
background-repeat: repeat-x;
}
Trong ví dụ này, hai hình ảnh trước đây đã được thay thế cho 1 hình ảnh pixelwide duy nhất đó là lặp đi lặp lại dọc theo trục x. Mặc dù hình ảnh chỉ có 1 pixel rộng, đó là 40 điểm ảnh cao, hy vọng cao hơn so với bất kỳ nội dung đó sẽ được chèn vào. Khi sử dụng một hình ảnh như một nền tảng, đó là luôn luôn cần thiết để "vượt qua" các chiều cao, với dự đoán của tràn nội dung, buồn bã làm cho hình ảnh lớn hơn và các yêu cầu băng thông lớn hơn. Ở đây, tuy nhiên, không giống như các giải pháp hoàn toàn imagebased, CSS3 sẽ chăm sóc của các góc cho chúng tôi với các cửa radiusand tài sản liên quan. Khách hàng muốn các góc được một chút tròn, khoảng 12 pixel? không vấn đề, chỉ cần sửa đổi các cửa radiusproperty để 12pxand công việc của bạn được thực hiện. CSS3 làm tròn góc propertyis nhanh, linh hoạt, và hỗ trợ trong Safari (v3 +), Firefox (v1 +), Opera (v10.5 +), Chrome (v3 +), và Internet Explorer 9. Microsoft là rất vui mừng về hỗ trợ trình duyệt IE 9 của các tính năng (Tôi hy vọng bạn cảm thấy mỉa mai nhẹ của tôi thấm qua đây) họ thậm chí còn thiết kế một trang Thể hiện tương tác những tác động khác nhau mà có thể đạt được với các cửa radiusproperty. xem này trình diễn tại URL sau: http://ie.microsoft.com/testdrive/html5/borderradius/default.html CSS3 có thể có những điều xa hơn bằng cách loại bỏ sự cần thiết cho một nền gradient hình ảnh bằng cách sản xuất hiệu quả trong trình duyệt thay thế. Khách sạn này không phải là tốt hỗ trợ nhưng với một cái gì đó dọc theo dòng tuyến tính gradient (màu vàng, màu xanh), là nền tảng của bất kỳ yếu tố có thể thưởng thức một gradient CSS3 tạo ra.
Gradient có thể được xác định trong một màu, giá trị HEX truyền thống (ví dụ, # BFBFBF) hoặc sử dụngmột trong những chế độ màu CSS3 (nhiều hơn về những trong Chương 5, CSS3: Bộ chọn, Typography, và chế độ màu). Nếu bạn hài lòng cho người sử dụng các trình duyệt cũ nhìn thấy một nền tảng vững chắc thay vì một gradient (như trái ngược với không có gì), một CSS chồng một cái gì đó như thế này sẽ cung cấp một màu trong các sự kiện của trình duyệt được không thể xử lý gradient:
background-color: #42c264;
background-image: -webkit-linear-gradient(#4fec50, #42c264);
background-image: -moz-linear-gradient(#4fec50, #42c264);
background-image: -o-linear-gradient(#4fec50, #42c264);
background-image: -ms-linear-gradient(#4fec50, #42c264);
background-image: -chrome-linear-gradient(#4fec50, #42c264);
background-image: linear-gradient(#4fec50, #42c264);
Thuộc tính linear-gradient chỉ thị các trình duyệt để bắt đầu với màu đầu tiên giá trị (# 4fec50, trong ví dụ này) và di chuyển với giá trị màu sắc thứ hai (# 42c264). Bạn sẽ nhận thấy rằng trong các mã CSS, nền hình ảnh thuộc tính linear-gradient đã được lặp đi lặp lại với một số lượng tiền tố; ví dụ,-webkit-. này cho phép các nhà cung cấp trình duyệt khác nhau (ví dụ,-moz cho Mozilla Firefox,-ms-cho Microsoft Internet Explorer, vv) để thử nghiệm với việc thực hiện của mình các thuộc tính CSS3 mới trước khi giới thiệu bài viết kết thúc, lúc này các tiền tố là không cần thiết. Như stylesheets bởi thác bản chất của họ, chúng ta đặt các phiên bản không tiền tố cuối cùng, có nghĩa là nó sẽ thay thế tờ khai trước đó nếu có.
Có thể HTML5 và CSS3 làm việc cho chúng ta ngày hôm nay?
Bất kỳ công cụ hay kỹ thuật chỉ nên được sử dụng nếu ứng dụng đòi hỏi. Như nhà phát triển / thiết kế FrontEnd, dự án của chúng ta thường đi kèm với một số lượng hữu hạn của thời gian và nguồn lực sẵn có để làm cho họ khả thi về mặt tài chính.
Internet Explorer 7 và 8 không hỗ trợ các yếu tố HTML5 ngữ nghĩa mới hoặc Thuộc tính CSS3 như là tiêu chuẩn, nếu phần lớn khách truy cập vào một trang web sử dụng Internet Explorer 7 hoặc 8, nó không làm cho rất nhiều ý nghĩa để tập trung nguồn lực của bạn trên xây dựng một responsive HTML5 và CSS3 dựa trên thiết kế cho nó. Đó không có nghĩa làm như vậy là một nhiệm vụ không thể. Như chúng ta sẽ thấy trong Chương 9, giải quyết Cross-trình duyệt Những thách thức đáp ứng, có một số lượng lớn các công cụ (gọi tắt là polyfillsas họ bao gồm các vết nứt trong các trình duyệt cũ) để vá các trình duyệt (chủ yếu là Old IE) thiếu hỗ trợ cho các tính năng mới hơn của trình duyệt, nhưng việc áp dụng một cách tiếp cận hợp lý để các thực hiện một thiết kế web đáp ứng ngay từ đầu luôn luôn là chính sách tốt nhất. Theo kinh nghiệm của riêng tôi, tôi thường yêu cầu sau đây ngay từ đầu:
• Có khách hàng muốn hỗ trợ các thị trường đang phát triển lớn nhất của người sử dụng Internet?
Nếu có, phương pháp đáp ứng phù hợp.
• Có khách hàng muốn sạch, nhanh nhất, và duy trì cơ sở mã nhất? Nếu có, phương pháp đáp ứng phù hợp.
• Liệu khách hàng hiểu kinh nghiệm có thể và nên được tinh tế khác nhau trên các trình duyệt khác nhau? Nếu có, phương pháp đáp ứng phù hợp.
• Liệu khách hàng yêu cầu thiết kế để trông giống hệt nhau trên tất cả các trình duyệt,
bao gồm cả IE 8 và các phiên bản thấp hơn? Nếu có, thiết kế đáp ứng không phải là phù hợp nhất.
• Có 70 phần trăm hoặc hơn của các du khách hiện tại hoặc dự kiến sẽ trang web có khả năng
sử dụng Internet Explorer 8 hoặc phiên bản thấp hơn? Nếu có, thiết kế đáp ứng không phải là phù hợp nhất.
Nó cũng quan trọng để tái iterate là nơi mà các ngân sách cho phép, có thể có lần khi một "di động" phiên bản đầy đủ riêng biệt của một trang web là một lựa chọn phù hợp hơn một thiết kế đáp ứng. Vì lợi ích của làm rõ, tôi hạn hoàn toàn điện thoại di động tập trung các giải pháp cung cấp nội dung / kinh nghiệm khác nhau cho người sử dụng điện thoại di động của họ là "điện thoại di động trang web '. Tôi không tin bất cứ ai ủng hộ kỹ thuật thiết kế web đáp ứng sẽ cho rằng một thiết kế web đáp ứng sẽ là một thay thế thích hợp cho một 'trang web di động "trong mọi tình huống.
thiết kế web đáp ứng không phải là viên đạn kỳ diệu
Có nguy cơ "bà giảng dạy để hút trứng", nó có giá trị lại nói rằng một đáp ứng thiết kế web HTML5 và CSS3 không phải là một "viên đạn ma thuật" thuốc chữa bách bệnh cho tất cả thiết kế và những thách thức nội dung phục vụ. Hơn bao giờ hết với thiết kế web, các chi tiết cụ thể của một dự án (cụ thể là ngân sách, mục tiêu nhân khẩu học, và mục đích) nên ra lệnh việc thực hiện. Tuy nhiên, theo kinh nghiệm của tôi, nếu ngân sách hạn chế và / hoặc các chương trình của một "trang web di động" hoàn toàn riêng biệt không phải là một lựa chọn, một thiết kế web đáp ứng hầu như luôn luôn cung cấp cho người sử dụng tốt hơn và toàn diện hơn kinh nghiệm hơn một tiêu chuẩn, thiết kế chiều rộng cố định.
Công ty TNHH Thương mại và Công Nghệ vGing
Địa chỉ: DC1604 Tòa nhà T&T DC Complex số 120 Định Công, Phường Định Công, Quận Hoàng Mai, TP. Hà Nội.
Điện thoại: (024) 66 596 240
Hotline: 0984 215 395
Email: sales@vging.com
