NộI Dung
- Bố trí
- Clearfix
- Kích thước hộp
- Nhiều cột
- Tính toán
- Phong cách
- Minh bạch
- Bộ lọc
- Thay thế hình ảnh
- Video đáp ứng
- Chức năng
- Dễ dàng chọn các phần tử
- Tạo mảng mới
- Làm sạch các đối tượng tài liệu và cửa sổ
- Thích cái này? Đọc những thứ này!
Bài báo này xuất hiện lần đầu trên tạp chí .net số 234 - tạp chí bán chạy nhất thế giới dành cho các nhà thiết kế và phát triển web.
Về cốt lõi, một kỹ thuật là một cách để thực hiện một nhiệm vụ và, là những nhà phát triển và thiết kế giao diện người dùng, chúng ta có rất nhiều nhiệm vụ. Điều đó nói rằng, chúng ta thường quên cảnh quan này đã thay đổi nhiều như thế nào. Từ năm 2002 đến năm 2010, cộng đồng của chúng tôi đã mục nát với mã và tài nguyên phình to, cản trở hiệu suất và khả năng bảo trì. Để khắc phục điều này, chúng tôi đã tạo ra một loạt các mẹo, thủ thuật và cách hack mà chúng tôi gọi là 'kỹ thuật'. Chúng tôi vẫn hoàn thành nhiệm vụ, chỉ là không theo cách hiệu quả nhất.
Thực hiện 360, vài năm qua đã chứng kiến việc triển khai các tiêu chuẩn và tiêu chuẩn tốt hơn, cho phép chúng tôi với tư cách là một cộng đồng phát triển các 'kỹ thuật' mới hơn và tiên tiến hơn. Cảnh quan mới này được coi là 'web hiện đại'.
Khi 'Web 2.0' trở nên trì trệ và khó hiểu, thì 'web hiện đại' cũng vậy. Hãy cho nó thời gian. Điều đó nói rằng, hiện tại, chúng ta có thể sử dụng và lạm dụng thuật ngữ miễn là có sự hiểu biết chung về những gì nó đại diện.
Vào năm 2010, đặc tả HTML5 đã hạ cánh, cung cấp một môi trường web bán tiêu chuẩn hóa hoàn toàn mới. Các trình duyệt như Opera, Firefox, Chrome và Safari đã đón nhận làn sóng mới này và đẩy nhóm nhà phát triển của họ đến các giới hạn mới về triển khai tiêu chuẩn và khám phá API. Để cung cấp cho bạn ý tưởng về cách các trình duyệt này hoạt động, hãy xem các hình ảnh trực quan của www.html5readiness.com về việc thay đổi hỗ trợ HTML5.
Đừng lo lắng về việc thiếu hỗ trợ trong Internet Explorer. Chúng tôi có thể chống lại điều này nhờ Google Chrome Frame. Kể từ khi Google giới thiệu nó vào năm 2010, nó đã trở thành cơ chế hỗ trợ dành cho Internet Explorer. Tất cả các phiên bản của IE đều có thể được nhắm mục tiêu bằng Chrome Frame, chương trình này sẽ nhắc người dùng mới tải xuống trình cắm hiển thị các trang web được chọn tham gia với phiên bản Chrome nhẹ bên trong IE. Để triển khai Chrome Frame, chúng tôi thêm thẻ meta> sau trong thẻ head> của trang web của chúng tôi.
meta http-Equiv = "X-UA-Tương thích" content = "chrome = 1" />
Từ đây, chúng tôi có thể nhắc người dùng IE tải xuống trình cắm, nếu chưa được cài đặt, sử dụng JavaScript:
script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
script>
window.onload = function () {
CFInstall.check ({
chế độ: "lớp phủ",
đích: "http://www.yourdomain.com"
});
};
/ script>
có thể đặt đích để đưa người dùng đến một liên kết nhất định sau khi cài đặt trình cắm. Một lời cảnh báo: mặc dù Chrome Frame cung cấp cho chúng tôi một phương pháp để phát triển nghiêm ngặt cho các trình duyệt thực sự hiện đại, nhưng chúng tôi không được quên rằng người dùng có tùy chọn không tải xuống plugin nếu họ không muốn. Nếu không và bạn được yêu cầu cung cấp hỗ trợ cho một hoặc các phiên bản IE khác, bạn sẽ phải dành thêm thời gian để tìm hiểu những gì bạn có thể và không thể cung cấp, với trải nghiệm của bạn, trên nhiều trình duyệt.
Với mã này cung cấp một sân chơi bình đẳng hơn đáng kể để phát triển trên nền tảng web hiện đại, chúng ta có thể thoải mái tiến lên phía trước. Bạn có thể nhớ phải tạo một số thủ thuật dành riêng cho trình duyệt để trang web của bạn có cấu trúc phù hợp với trình duyệt chéo, tạo ra vô số phần tử trống được sử dụng với các hình ảnh cắt lát của bạn hoặc thậm chí viết mã JavaScript quá dài dòng hoặc dư thừa để có được đơn giản nhất của chức năng để làm việc. Tất cả những nỗi đau này, theo một nghĩa nào đó, là những vấn đề giống như chúng ta lo lắng ngày nay. Chúng tôi vẫn đang chiến đấu để có thêm quyền kiểm soát và các công cụ tốt hơn để chống lại bố cục, kiểu dáng và chức năng nhưng ở mức độ trưởng thành.
Bố trí
Clearfix
Làm nổi một phần tử đã được giới thiệu trở lại trong CSS 2.1 nhưng chưa bao giờ hoàn toàn trở thành giải pháp hoàn chỉnh mà chúng tôi đã hy vọng. Một trong những vấn đề lớn nhất là duy trì kích thước của phần tử mẹ khi phần tử con được thả nổi. Để giải quyết vấn đề này, kỹ thuật clearfix đã được tạo ra.
Lấy HTML sau:
div>
div> ... / div>
div> ... / div>
/ div>
Kỹ thuật này được viết bởi Nicolas Gallagher:
.clearfix: trước đây,
.clearfix: sau {
Nội dung: " ";
hiển thị: bảng;
}
.clearfix: sau {
rõ ràng: cả hai;
}
.clearfix {
* thu phóng: 1;
}
Nếu bạn sử dụng HTML5Boilerplate để bắt đầu các dự án của mình, thì bạn sẽ có phiên bản này của kỹ thuật clearfix.
Kích thước hộp
Trong nhiều năm, các nhà phát triển đã tranh luận về việc triển khai mô hình hộp nào có ý nghĩa hơn. Chế độ Quirks so với Tiêu chuẩn thực sự có nghĩa là: "kích thước của phần tử có thay đổi, sau khi được đặt, khi đường viền và phần đệm được áp dụng hay không".
Giờ đây, mọi người đã đồng ý rằng sẽ có ý nghĩa hơn khi các đường viền và phần đệm lấy đi không gian có sẵn bên trong một phần tử và không thêm vào chiều rộng hoặc chiều cao của phần tử. Cuộc tranh luận đã được đưa ra không liên quan đến việc triển khai rộng rãi kích thước hộp. Trình duyệt sẽ lấy tín hiệu từ bạn thay vì ngược lại.
Được phổ biến bởi Chris Coyier và Paul Irish, một kỹ thuật toàn diện có thể được thực hiện với những điều sau:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Việc sử dụng công cụ chọn * trong CSS đã được tranh luận do các lần truy cập hiệu suất tiềm năng. Những loại tuyên bố này là phù phiếm nếu bạn không tối ưu hóa tất cả các khía cạnh khác của trang web / ứng dụng của mình. Sử dụng hộp viền sẽ làm cho trình duyệt thêm phần đệm và đường viền bên trong tập không gian khả dụng. Có thể sử dụng 'Chế độ tiêu chuẩn' bằng cách đặt kích thước hộp thành hộp nội dung.
Nhiều cột
Trang web được truyền cảm hứng rất nhiều từ hình thức và kiểu chữ viết. Thật không may, chúng tôi đã bị mắc kẹt ở giai đoạn giấy da. Một số vấn đề này đang xảy ra với thông số kỹ thuật của Vùng Paged-Media và CSS được chờ đợi từ lâu. Điều đó nói rằng, các bước đầu tiên hướng tới bố cục giống tạp chí hơn đã được thực hiện khi các trình duyệt bắt đầu triển khai CSS nhiều cột. Mã để tạo hiệu ứng này khá đơn giản:
p {
-webkit-column-count: 2;
-moz-cột-đếm: 2;
cột-số: 2;
}
Bạn có thể tìm hiểu thêm về thông số kỹ thuật nhiều cột CSS3, cũng như dự phòng JavaScript mà bạn có thể sử dụng cho bất kỳ trình duyệt nào mà không cần hỗ trợ, từ blog của A List Apart.
Tính toán
Tính toán kích thước có thể khó. Ngày xưa, chúng ta không có cách nào để làm bất kỳ loại tính toán đơn vị nào, chứ chưa nói đến các phép tính đơn vị hỗn hợp. Đó là tất cả đã thay đổi nhờ vào calc. Tạo hiệu ứng đệm không ảnh hưởng đến chiều rộng của các phần tử ban đầu hoặc sử dụng một cái gì đó như box-sizing: border-box; cho đến gần đây, chỉ có thể thực hiện được bằng cách thêm các phần tử có chứa bổ sung.
.padded {
margin: 0 auto;
chức vụ: thân nhân;
width: -webkit-calc (100% - (20px * 2));
chiều rộng: -moz-calc (100% - (20px * 2));
chiều rộng: calc (100% - (20px * 2));
}
calc () thực hiện tính toán chiều rộng thích hợp dựa trên chiều rộng mẹ của .padded và trừ đi một phần đệm 20px đã xác định. Tôi nhân giá trị này với 2 cho một trong hai bên của phần tử của mình, căn giữa phần tử bằng cách sử dụng vị trí tương đối và tự động đặt lề trái và phải.
Phong cách
Minh bạch
Việc có được phong cách phù hợp của một phần tử luôn phụ thuộc vào loại công cụ mà chúng tôi có sẵn trong CSS. Tính minh bạch là một trong những biến thể hỗ trợ đầu tiên mà bạn gặp phải vào đầu những năm 2000.
Với sự ra đời của HTML5 và các nỗ lực tiêu chuẩn tập trung hơn, các trình duyệt có triển khai tiêu chuẩn thuộc tính độ mờ và có hỗ trợ kênh alpha theo thông số Mô-đun màu mới. Điều này bao gồm hướng dẫn RGBA và HSLA.
một {
màu: rgba (0,255,0,0,5);
nền: rgba (0,0,255,0.05);
biên giới: rgba (255,0,0,0.5);
}
Bạn có thể sử dụng màu RGBA hoặc HSLA ở bất cứ nơi nào bạn tìm thấy giá trị HEX. Ngoài ra còn có một danh sách mở rộng các màu sắc vui nhộn với các tên được xác định mà bạn có thể kiểm tra ngay trong thông số kỹ thuật. Những điều này rất hữu ích khi bạn muốn tạo sự pha trộn động giữa các phần tử.
Bộ lọc
Bộ lọc CSS cực kỳ thú vị. Khả năng tự động thay đổi giao diện của các phần tử trên trang mà không cần đến các trình cắm thêm của bên thứ ba là điều tuyệt vời và sẽ giúp giảm đáng kể thời gian của bạn trong Photoshop.
img src = "market.webp">
img {
-webkit-filter: thang độ xám (100%);
}
Bộ lọc CSS hiện chỉ được hỗ trợ trong trình duyệt WebKit vì vậy việc sử dụng chúng phải mang tính chất bổ sung, không phụ thuộc. Đọc thêm tại đây.
Thay thế hình ảnh
Thay thế văn bản bằng hình ảnh đã có từ lâu. Thật không may, vẫn có những hạn chế, tùy theo khả năng tiếp cận, đối với các kỹ thuật thay thế hình ảnh mới nhất và tinh vi nhất. Nhưng gần đây hai người đã được đưa ra ánh sáng rằng họ cực kỳ thông minh và độc nhất trong quyền riêng của họ. Đầu tiên được viết bởi Scott Kellman:
h1 class = ’hide-text’> Biểu trưng của trang web của tôi / h1>
.Ẩn văn bản {
thụt lề văn bản: 100%;
khoảng trắng: nowrap;
tràn: ẩn;
}
Cuốn thứ hai được viết bởi Nicolas Gallagher:
.Ẩn văn bản {
phông chữ: 0/0 a;
text-shadow: không có;
màu sắc: trong suốt;
}
Video đáp ứng
Để phương tiện được chia tỷ lệ chính xác trong một môi trường đáp ứng có thể là một thách thức. Với ngày càng nhiều trang web tôn trọng thiết kế thích ứng, điều cần thiết là phải xử lý đúng kích thước và tỷ lệ co của các phần tử.
Video nhúng là một trong những loại phương tiện khó khăn hơn để gây tranh cãi vì cách mà các dịch vụ của bên thứ ba phân phát nội dung. Một bản nhúng thông thường của YouTube trông giống như sau:
iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Sau đó, phần tử iframe chứa một đối tượng Flash hoặc phần tử nhúng. Sử dụng một cái gì đó như iframe {maxwidth: 100%; } sẽ không hoạt động vì các phần tử lồng nhau không thay đổi kích thước chính xác khi chiều rộng thay đổi. Vì vậy, chúng ta phải làm một số thủ thuật.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Việc bao bọc iframe trong một phần tử khác sẽ cung cấp cho chúng tôi quyền kiểm soát mà chúng tôi cần để thêm chức năng phản hồi thích hợp vào video.
.video {
chức vụ: thân nhân;
đệm lót: 56,25%;
chiều cao: 0;
tràn: ẩn;
}
.video iframe,
đối tượng .video,
.video nhúng {
vị trí: tuyệt đối;
đầu: 0;
trái: 0;
chiều rộng: 100%;
chiều cao: 100%;
}
Đặt padding-bottom của trình bao bọc .video: 56,25%; là điều kỳ diệu trong phương pháp này. Sử dụng padding có nghĩa là tỷ lệ phần trăm được sử dụng sẽ dựa trên chiều rộng của trang gốc; ‘56 .25% ’sẽ tạo ra tỷ lệ khung hình 16: 9. Tự làm các phép toán nếu bạn muốn. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (đây là phần trăm của chúng tôi).
Chức năng
Dễ dàng chọn các phần tử
Với sự phổ biến của một số thư viện JavaScript (ví dụ: jQuery), ủy ban ECMAScript và các tiêu chuẩn W3C đã lưu ý đến một trong những phần cốt lõi của các nhà phát triển chức năng thiếu nguyên bản - lựa chọn phần tử tốt. Các phương thức như getElementByID () và getElementByClassName () nhanh nhưng không linh hoạt và mạnh mẽ như các công cụ bộ chọn đến từ cộng đồng nhà phát triển; querySelectorAll () là cách của cơ quan tiêu chuẩn để bắt chước một số tính linh hoạt đó trong phương pháp bộ chọn gốc.
var items = document.querySelectorAll (’# header .item’);
querySelectorAll () có thể được chuyển qua nhiều bộ chọn và hỗn hợp. Đọc thêm về điều này.
Tạo mảng mới
Lặp lại trên một mảng là một cái gì đó trở nên mệt mỏi để viết. Viết và viết lại cho () vòng lặp không thú vị. Trong phiên bản JS 1.6, phương thức map () đã hạ cánh cung cấp hỗ trợ một cách dễ dàng để lặp lại và tạo một mảng mới từ một mảng khác.
var people = [’Heather’, ’James’, ’Kari’, ’Kevin’];
var welcome = people.map (function (name) {
return ‘Hi’ + name + ’!’;
});
Chạy mã này, nếu chúng ta truy cập console.log (welcome), bạn sẽ thấy welcome là một mảng mới [‘Hi Heather!’, ‘Hi James!’, ‘Hi Kari!’, ‘Hi Kevin! ' ].
Làm sạch các đối tượng tài liệu và cửa sổ
Các thư viện JavaScript của bên thứ ba dễ gây nhầm lẫn với các đối tượng cửa sổ và tài liệu gốc. Đây có thể là một vấn đề đối với các thư viện của bên thứ ba khác và nhà phát triển bao gồm cả chúng. Là một trong hai bên, hãy đảm bảo rằng bạn đang làm việc với phiên bản sạch của cả hai đối tượng bằng cách tạo một phiên bản mới của chúng. Cách tốt nhất để làm điều này là tạo một phần tử iframe, chèn nó vào DOM và lưu trữ các phiên bản mới của các đối tượng đó.
var iframe = document.createElement (’iframe’);
iframe.style.display = "none";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Mặc dù đã có những cải tiến lớn đối với ngăn xếp web, việc tiếp tục hoàn thiện và cải tiến bộ công nghệ của chúng tôi để đáp ứng những thách thức mà chúng tôi phải đối mặt trong bố cục, phong cách và chức năng của dự án vẫn vô cùng quan trọng. Để duy trì một hệ sinh thái phát triển tốt, chúng tôi phải khuyến khích các cơ quan tiêu chuẩn và nhà cung cấp trình duyệt tiếp tục phát triển với các thông số kỹ thuật mới và triển khai tính năng sáng tạo trong khi chia sẻ kiến thức của riêng chúng tôi với các nhà phát triển và nhà thiết kế đồng nghiệp. Nhiều thông tin chi tiết hơn, ít hack hơn.
Darcy Clarke là nhà phát triển từng đoạt giải thưởng, người đồng sáng lập công ty chủ đề WordPress Themify và công ty tổng hợp giao dịch hàng ngày DealPage, đồng thời là thành viên của Nhóm jQuery. Anh ấy làm việc tại Polar Mobile với tư cách là nhà phát triển UX cấp cao.
Thích cái này? Đọc những thứ này!
- Cách tạo ứng dụng
- Tải xuống các phông chữ miễn phí tốt nhất
- Bàn chải Photoshop miễn phí mà mọi sáng tạo phải có
- Hướng dẫn về Illustrator: những ý tưởng tuyệt vời để thử ngay hôm nay!
- Những ví dụ tuyệt vời về nghệ thuật vẽ nguệch ngoạc
- Lựa chọn hướng dẫn Wordpress rực rỡ
- Các phông chữ web miễn phí tốt nhất cho các nhà thiết kế
- Tải xuống các kết cấu miễn phí: độ phân giải cao và sẵn sàng sử dụng ngay bây giờ
