Giữ mã CSS3 của bạn Markup Slim
Các nhà phát triển web có thể tiết kiệm rất nhiều thời gian bằng cách sử dụng cú pháp CSS3 tinh vi hơn. Người dùng truy cập trang của bạn đang mong đợi thời gian tải nhanh nhất có thể - điều này khiến bạn có trách nhiệm giảm kích thước tệp. Có rất nhiều thủ thuật tốc ký với CSS và đặc biệt là theo mô hình CSS3 mới.
Tôi đã tập hợp một vài trong số những ý tưởng này trong hướng dẫn dưới đây. Chúng ta cũng nên chạm vào các khu vực khác như thu nhỏ mã CSS của bạn. Có các công cụ trong trình duyệt có sẵn để hỗ trợ các nhà phát triển trong quá trình tạo kiểu nhưng bạn muốn kết hợp các mã ngắn với việc giảm kích thước tệp này để cuối cùng hợp lý hóa quy trình kết xuất trang web của bạn.
Mẹo cơ bản về định dạng
Trước khi chúng ta nhảy vào cú pháp CSS thực tế, tôi muốn tìm hiểu về chủ đề làm sao để viết CSS của bạn. Nếu bạn có chút quen thuộc với thiết kế web, bạn có thể đã thấy một bản định kiểu trước đây, có thể hơn một lần. Phần đầu tiên của mỗi lệnh được gọi là bộ chọn. Mục tiêu này nhắm đến loại phần tử sẽ nhận các kiểu được thêm vào bên trong dấu ngoặc nhọn, còn được gọi là tính chất.
Cấp độ nội tuyến
Với các kiểu nội tuyến, mỗi thuộc tính được viết lần lượt chỉ có khoảng trắng để phân tách chúng. Phương pháp này được áp dụng tốt nhất cho các bộ chọn trong đó bạn chỉ cần một vài thuộc tính. Nó sẽ giúp bạn tiết kiệm không gian trên trang và việc cuộn qua biểu định kiểu của bạn sẽ nhanh hơn nhiều. Trong trường hợp bạn chưa bao giờ gặp CSS nội tuyến trước đây, tôi đã thêm một ví dụ nhỏ bên dưới nhắm mục tiêu liên kết neo HTML.
một màu: # 648cc8; font-weight: in đậm; a: di chuột màu: # 739cda; trang trí văn bản: không có; a.alt màu: # bd4949! quan trọng;
Cấp khối
Mặt khác, các thuộc tính kiểu khối được nhập vào một dòng trên mỗi cặp khóa / giá trị và thường được thụt lề để chỉnh sửa nhanh hơn khi quét mã. Khoảng 99% các bảng định kiểu sạch hơn mà tôi sử dụng định dạng này và nó đã trở thành một tiêu chuẩn công nghiệp cho nhiều nhà thiết kế. Nếu bộ chọn của bạn đang sử dụng nhiều hơn 6 hoặc 7 thuộc tính thì đây là định dạng tốt nhất để áp dụng.
Khi bạn xem xét nhiều thuộc tính CSS3 mới, bạn cũng nhận ra rằng các biểu định kiểu của bạn sẽ lấp đầy nhanh như thế nào. Và nhiều trong số các thuộc tính này hỗ trợ các bản sao dành riêng cho trình duyệt yêu cầu các mục nhập mã gần như trùng lặp (như bán kính đường viền). Bạn có thể xem ví dụ của tôi về một thuộc tính khối được đặt bên dưới nhắm mục tiêu một div trình bao bọc mẫu.
.bọc hiển thị: khối; đệm: 6px 10px; nền: #FFF; bán kính đường viền: 4px; -moz-viền-bán kính: 4px; -webkit-Border-radius: 4px; -o-Border-radius: 4px;
Không có cách viết CSS nào đặc biệt tốt hơn cách khác. Cuối cùng, đó là sự lựa chọn của bạn với tư cách là một nhà phát triển mà bạn thích phong cách, và thậm chí điều này sẽ theo dự án bạn làm việc. Thậm chí rất phổ biến để tìm CSS nơi các nhà thiết kế đã trộn cả hai lại với nhau! Cá nhân tôi cảm thấy rằng “đang trong quá trình hoàn thiện” có xu hướng dễ dàng hơn với các kiểu khối vì tôi liên tục kiểm tra biểu định kiểu để thực hiện các chỉnh sửa hoặc bổ sung. Nhưng đối với các miền nặng lưu lượng truy cập giảm thiểu tệp CSS của bạn là cách tốt nhất tuyệt đối để đi.
Giữ cho họ gầy
Bằng cách sử dụng nhiều mã ngắn có sẵn trong CSS3, bạn có thể tiết kiệm rất nhiều thời gian phát triển. Chỉnh sửa các yếu tố HTML sẽ trở nên dễ dàng hơn rất nhiều khi bạn hiểu về biệt ngữ tiết kiệm thời gian này. Ngoài ra, mã của bạn sẽ xuất hiện rõ ràng hơn và dễ nhìn hơn.
Nhược điểm duy nhất là không phải tất cả các trình duyệt đều hỗ trợ đầy đủ các thuộc tính này. Có nhiều cách giải quyết cho nhiều vấn đề hiện có như trong Internet Explorer và Netscape. Rất may, Web luôn phát triển về phía trước và khi CSS3 ngày càng phổ biến, chúng tôi chắc chắn cũng sẽ trải qua sự tăng trưởng về khả năng tương thích trình duyệt..
Độ trong suốt / Độ mờ của RGBa
RGBavalue mới không chính xác là CSS3 bất động sản, nhưng độ trong suốt alpha chỉ dành riêng cho CSS3. Thay vì các giá trị "Red Green Blue" phổ biến mà bạn chuyển qua cho màu sắc bây giờ bạn có thể bao gồm tùy chọn thứ tư về độ trong suốt của màu. Bởi vì điều này, các nhà phát triển web được thực hiện với các PNG trong suốt gần như hoàn toàn.
Cú pháp cơ bản yêu cầu giá trị từ 0-255 trong ba (3) vị trí đầu tiên và 0-1.0 ở vị trí alpha. Phạm vi màu cụ thể cho mức độ hiển thị của từng màu (RGB) với 0 là không có gì và 255 đầy.
/ ** cú pháp ** / nền: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** ví dụ ** / div nền: rgba (255, 255, 255, 0.3);
Tương thích trình duyệt chéo
Một tài sản khác độ mờ đục có thể được sử dụng trong một số trường hợp. Tuy nhiên, điều này sẽ ảnh hưởng đến toàn bộ thành phần HTML và nội dung bên trong, không chỉ nền mà bạn thấy trong ví dụ của tôi.
Thật không may, Internet Explorer chưa hỗ trợ giá trị màu RGBa. Nói chung, bạn nên bao gồm một thuộc tính dự phòng với độ mờ hoàn toàn cho các trình duyệt kém tiêu chuẩn này. Bạn thiết lập giá trị này với cùng các giá trị nhưng không bao gồm giá trị thứ 4 (độ mờ đục). Nó sẽ trông giống như rgba (255, 255, 255)
Ngoài ra, Internet Explorer có thể được xử lý duyên dáng hơn một chút thông qua các điều kiện. Bạn thực sự có thể kiểm tra xem trình duyệt có chạy IE hay không và hiển thị bộ lọc Microsoft CSS độc quyền theo lệnh. Tôi đã chứng minh điều này trong ví dụ của tôi dưới đây (lưu ý điều này sẽ xuất hiện ở đâu đó trong tệp HTML của bạn):
Bán kính viền CSS3
Tôi đã đọc một vài chủ đề diễn đàn khó hiểu về việc tạo các đường viền tròn với CSS3 - không phải là quá nhiều về cách thức thực hiện, nhưng với sự hỗ trợ trình duyệt khó khăn, các nhà phát triển web đang tranh giành mã dễ nhất để thả vào và hoạt động như mong đợi.
/ ** cú pháp ** / Border-radius: trên cùng bên trái trên cùng bên phải dưới cùng bên phải dưới cùng bên trái;
Các bán kính biên giới thuộc tính chia sẻ cú pháp tương tự để tạo đường viền tiêu chuẩn, ngoại trừ trong trường hợp này chúng tôi đang nhắm mục tiêu vào các góc hộp. Thuộc tính này thực sự sẽ chấp nhận 1 - 4 giá trị và mỗi giá trị chúng nhắm mục tiêu thiết lập các góc khác nhau.
- 1 giá trị: Tất cả bốn góc được làm tròn đến cùng một giá trị
- 2 giá trị: Giá trị đầu tiên áp dụng cho
trên cùng bên tráivàgóc phải ở phía dướitrong khi giá trị thứ hai đạttrên cùng bên phảivàdưới cùng bên trái - 3 giá trị: Lần đầu tiên áp dụng cho
trên cùng bên tráigóc, thứ hai là cả haidưới cùng bên trái&trên cùng bên phảitrong khi giá trị thứ 3 và cuối cùng được áp dụng chogóc phải ở phía dưới - 4 giá trị: Tất cả 4 giá trị góc mục tiêu theo thứ tự sau: trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải, dưới cùng bên trái
/ ** ví dụ ** / div Border-radius: 4px 4px 8px 4px; div Border-radius: 4px 4px 8px;
Vì vậy, trong đoạn mã trên chúng tôi đang sử dụng bán kính biên giới để áp dụng hiệu ứng làm tròn 4px cho mọi thứ trừ góc phải ở phía dưới đường viền được làm cong 8px. Nếu bạn nhận thấy nó, cả hai mã này sẽ thực sự áp dụng cùng một hiệu ứng kiểu.
Tương thích trình duyệt chéo
Bây giờ vấn đề chính là bán kính biên giới chỉ được hỗ trợ trong một vài trình duyệt. Internet Explorer 9 gần đây đã thêm hỗ trợ tuyệt vời và Opera cũng sẽ kết xuất điều này. Tuy nhiên, ngay cả Opera cũng đã tạo ra tài sản của riêng mình với -bán kính biên giới nhắm mục tiêu công cụ trình duyệt cụ thể của họ. Ngoài ra -bán kính biên giới được hỗ trợ bởi phần mềm Firefox / Gecko và -webkit-Border-radius cho Google Chrome / Safari.
Mã dưới đây là một ví dụ về mẫu xương trần của tôi để tạo các góc tròn với sự hỗ trợ trình duyệt toàn cầu lớn nhất.
div Border-radius: 4px 4px 8px 4px; -webkit-Border-radius: 4px 4px 8px 4px ;; -moz-Border-radius: 4px 4px 8px 4px; -o-Border-radius: 4px 4px 8px 4px;
Fancy a Drop Shadow?
Khía cạnh thực sự tuyệt vời khác của CSS3 là hỗ trợ cho cái hộp và bóng văn bản. Đây là một vấn đề như vậy đối với các nhà phát triển trong quá khứ vì hình ảnh nền là lựa chọn thực tế duy nhất. Cú pháp này thực sự tuân theo vai trò tốc ký dễ dàng hơn nhiều so với các thuộc tính khác mà chúng tôi đã đề cập. Lúc đầu, rất khó để nhớ thứ tự đúng của các giá trị chính - nhưng bạn càng thực hành nhiều, nó sẽ càng dễ dàng hơn.
Thật không may, Internet Explorer một lần nữa là một trong những lẻ. Mọi trình duyệt lớn khác bao gồm Firefox, Google Chrome, Safari và Opera đều hỗ trợ đầy đủ bóng văn bản bất động sản. Các nhà phát triển đã cố gắng xây dựng hỗ trợ IE của riêng họ nhưng vẫn còn rất hạn chế. Cú pháp cơ bản được viết như sau:
/ ** cú pháp ** / text-Shadow: x-offset y-offset màu bán kính mờ; / ** ví dụ ** / div text-bóng: 2px 2px 1px # 111;
Giá trị bù X và Y cho trình duyệt biết bóng phía bên phải và phía dưới sẽ xuất hiện bao xa. Bạn có thể sử dụng các giá trị âm để định vị bóng trên và bên trái, tương ứng. Nhưng điều này có vẻ rất khó xử nên tôi khuyên bạn nên sử dụng số nguyên dương. Ngoài ra, giá trị bán kính mờ có thể được sử dụng để làm mịn các cạnh cứng, nếu bóng văn bản xuất hiện không tự nhiên.
Cú pháp này chỉ nhìn vào ký hiệu cơ bản khi tạo hiệu ứng đổ bóng đơn. Các nhà thiết kế cao cấp đã nghiên cứu để thậm chí tạo ra nhiều bóng cùng một lúc! Tôi tham khảo bài đăng blog tuyệt vời này từ hồi tháng 4 năm 2011, đi sâu vào chi tiết tuyệt vời về việc áp đặt bóng văn bản. Nếu bạn có thời gian, hãy lướt qua nội dung chỉ để có ý tưởng về các tính năng nâng cao hơn và chắc chắn đánh dấu nó như một tài liệu tham khảo trong tương lai!
Tương thích trình duyệt chéo
Kẻ gièm pha lớn nhất mà chúng tôi gặp phải là Internet Explorer. Hết lần này đến lần khác Microsoft đã đẩy ra công cụ kết xuất trình duyệt của riêng họ, hoạt động tốt nhất. Bây giờ ngay cả với CSS3 đang ngự trị trong bóng văn bản, IE vẫn ở phía sau. Có một trang web demo tuyệt vời nơi bạn có thể tìm thấy các ví dụ mã và nhận xét có điều kiện CSS truyền thống.
Về cơ bản, bạn đang muốn kiểm tra xem trình duyệt mà người dùng của bạn đang chạy có phù hợp với bất kỳ phiên bản nào của Internet Explorer 9 trở xuống không. Sau đó, sử dụng bộ lọc MS, chúng ta có thể áp dụng bóng cho bất kỳ thành phần văn bản nào (ở trên, chúng tôi đang sử dụng một đoạn).
Chuyển tiếp dễ dàng
CSS3 quá độ là tài sản nóng nhất trên thị trường thiết kế kể từ flapjacks của bà! Các nhà thiết kế web đã làm ầm ĩ lên về các chuyển đổi CSS thuần túy, mặc dù sự hỗ trợ chủ yếu giới hạn ở các trình duyệt Webkit. Tất nhiên bạn có thể sử dụng các thuộc tính thứ cấp cho Mozilla và Opera và như vậy. Nhưng ký hiệu tốc ký thực sự hấp dẫn, đặc biệt nếu bạn chống lại hoạt hình JavaScript vì bất kỳ lý do gì.
Trước hết, hãy xem thuộc tính chuyển đổi ban đầu. Điều này sẽ yêu cầu 4 giá trị mà bạn cũng có thể tự chia thành các thuộc tính. Chúng tương ứng với quá trình chuyển đổi bất động sản(hiệu ứng là gì), thời lượng(bao lâu để vẽ nó ra), chức năng thời gian(thay đổi tốc độ trên hình động) và sự chậm trễ(số giây chờ đợi trước khi hoạt hình).
/ ** cú pháp ** / quá trình: độ trễ thời gian thuộc tính thời gian thuộc tính; / ** ví dụ ** / img chuyển đổi thuộc tính: độ mờ; thời gian chuyển tiếp: 2s; chuyển tiếp-thời gian-chức năng: dễ dàng; độ trễ chuyển tiếp: 0,5s;
Bạn nên trực giác hiểu mục đích của hầu hết các thuộc tính này ngoại trừ chức năng định thời. Mặc dù lúc đầu khó hiểu, thuộc tính này chỉ đơn giản là hoạt hình chuyển đổi của bạn một cách khác nhau để hiệu ứng sẽ bắt đầu chậm hơn, kết thúc chậm hơn hoặc một cái gì đó tương tự.
Các trường W3 có tài liệu chức năng thời gian trực tuyến liệt kê tất cả các giá trị có thể bạn có thể thử. Tôi liên tục thấy mình làm việc với những hướng dẫn này, nhưng họ tạo ra những dấu trang tiện dụng như vậy.
Tương thích trình duyệt chéo
Bây giờ, hãy mang hỗ trợ trình duyệt đầy đủ vào chơi. Theo mặc định, thuộc tính chuyển đổi là chỉ có được hỗ trợ bởi các phiên bản mới hơn của Safari. Tuy nhiên, nhiều người dùng vẫn yêu cầu -webkit tiền tố cũng áp dụng cho Google Chrome và các công cụ kết xuất tương tự. Dưới đây là một “hoàn thiện” Mẫu khối mã Tôi khuyên bạn nên lưu và sử dụng nếu bạn cần hỗ trợ chuyển đổi từ phần lớn các trình duyệt web.
img quá trình chuyển đổi: độ mờ 2 giây dễ dàng trong 1 giây; -webkit-quá trình chuyển đổi: độ mờ 2s dễ dàng trong 1 giây; / * chrome, safari, bầy * / -moz-quá trình: opacity 2s easy-in 1s; / * mozilla + tắc kè * / -o-quá trình: độ mờ 2s dễ dàng trong 1s; / * opera * /
Hiệu ứng đột quỵ văn bản
Khách sạn này không lớn và bạn sẽ không tìm thấy nhiều nhà thiết kế web sử dụng nó ngày hôm nay. Nhưng bạn có thể sử dụng văn bản đột quỵ để xây dựng một số hiệu ứng thực sự gọn gàng với phông chữ của bạn. Các trình duyệt Webkit như Safari và Chrome là những người hỗ trợ thực sự duy nhất cho đến nay. Opera và Firefox gặp khó khăn khi kết xuất các đối tượng văn bản có cùng các phác thảo này.
/ ** cú pháp ** / p -webkit-text-Stro: màu chiều rộng; / ** ví dụ ** / p -webkit-text-Stro: 1px # 222;
Tương thích trình duyệt chéo
Nếu bạn cảm thấy cần hiệu ứng đột quỵ văn bản, bạn nên luôn luôn bao gồm một màu sao lưu. Mozilla và Opera có thể nhận được, tuy nhiên người dùng Internet Explorer không có lựa chọn nào khác. Đáng buồn thay, đây là một trong những thuộc tính CSS3 mới hơn chưa nhận được đủ sự hỗ trợ từ cộng đồng các nhà phát triển trình duyệt web. Bạn nên dành thời gian chơi xung quanh với công cụ web tuyệt vời này được tạo riêng để xây dựng các phác thảo văn bản CSS3 này.
Kích thước hộp
Thuộc tính kích thước hộp cho phép bạn kiểm soát nhiều hơn tổng chiều rộng / chiều cao của bất kỳ thành phần khối nào. Theo mặc định, chiều rộng / chiều cao + đường viền + lề + phần đệm tạo nên tổng kích thước của một hộp. Tuy nhiên, sử dụng hộp viền trên nội dung của bạn sẽ đẩy tất cả phần đệm và lề của bạn hướng nội để giữ cho chiều rộng chính xác như nhau. Chỉ có hai giá trị cho thuộc tính này, với hộp nội dung là mặc định.
div chiều rộng: 550px; phần đệm: 9px; kích thước hộp: hộp viền; / * chiều rộng sẽ ở mức 550px * /
Như bạn có thể tưởng tượng điều này sẽ có ích vào một lúc nào đó trong sự nghiệp CSS của bạn. Đệm và lề có thể là một nỗi đau thực sự và khi bạn thêm viền, bạn có xu hướng mất dấu pixel.
Tương thích trình duyệt chéo
Opera và IE 8 hỗ trợ thuộc tính mới này theo mặc định. IE7 trở xuống bị kẹt với thiết lập hộp nội dung trừ khi khách truy cập của bạn đang sử dụng chế độ quirks. Các bổ sung duy nhất bạn nên biết về cụ thể nhắm mục tiêu webkit và công cụ trình duyệt do Mozilla cung cấp.
div -webkit-box-sizing: hộp viền; / * Safari / Chrome * / -moz-box-sizing: hộp viền; / * Firefox * / box-sizing: Border-box; / * Opera / IE8 + * /
Cột CSS3 thuần túy
Các cột hơi phức tạp với CSS3 nhưng có thể được thực hiện với mã tối thiểu. 2 thuộc tính bạn muốn tập trung vào là số cột và khoảng cách cột. Số lượng tham chiếu tổng số cột bạn muốn áp dụng trong khi khoảng cách tạo ra một lề giữa mỗi cột.
div # cols cột-đếm: 3; cột-gap: 10px;
Trong ví dụ của tôi, chúng ta có thể thấy ID #cols đang được sử dụng làm vùng chứa. Bên trong chúng tôi chia div thành 3 cột với khoảng cách 10px giữa mỗi cột. Hơn nữa bạn có thể thiết lập chiều rộng cột được sử dụng để đặt tổng chiều rộng của mỗi cột thay vì liệt kê một số rắn.
Tương thích trình duyệt chéo
Bất cứ điều gì trước IE8 sẽ không thể sử dụng tài sản này. Nhưng như chúng ta đã thấy trong mọi ví dụ, Mozilla và Webkit cung cấp các giải pháp riêng cho nhiều trình duyệt. Nếu bạn cần một mẫu hãy xem mã ví dụ nhỏ của tôi dưới đây:
div # sidebar width: 210px; -moz-cột-đếm: 3; -moz-cột-gap: 7px; -webkit-cột-đếm: 3; -webkit-cột-gap: 7px; đếm cột: 3; cột-gap: 7px;
Tùy chỉnh @ font-face
Bạn hẳn đã nghe về sự phấn khích liên quan đến phông chữ tùy chỉnh CSS3. Sử dụng tốt thuộc tính @ font-face, chúng ta có thể nhập các kiểu phông chữ bên ngoài và sử dụng các kiểu này giống như bất kỳ gia đình nào khác. Cú pháp có phần phức tạp và bạn sẽ phải dành thời gian để làm cho đúng. Khối cho @mặt chữ được sử dụng để xác định tên gia đình, sau đó bạn có thể sử dụng tên này trong phông chữ gia đình bất động sản ở bất cứ đâu!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Chỉ Internet Explorer * / Vì vậy, bạn thấy ở trên tôi không nhắm mục tiêu bất kỳ loại phông chữ cụ thể, nhưng cú pháp là những gì nên nổi bật. Lưu ý rằng Internet Explorer chỉ hỗ trợ .eot các loại phông chữ, trong khi .ttf và .không là các tùy chọn phổ biến cho các trình duyệt khác. Ngoài ra, về tầm quan trọng, bạn nên hiểu rằng bạn có thể chuyển URL phông chữ từ các liên kết trực tiếp, nghĩa là. url ('https://www.hongkiat.com/css3/fonts/myfont.ttf');
Không có vấn đề trình duyệt chéo thực sự với thiết lập này vì tất cả các công cụ kết xuất có thể phân tích các loại tệp phông chữ này. Chỉ cần nhớ rằng để hỗ trợ IE, bạn phải bao gồm một phiên bản eot cũng như bản gốc của bạn. Tôi cảm thấy bài viết của Trường W3 có một danh mục các thông tin quan trọng nhất mà bạn nên xem.
Chuyển đổi sang CSS thu nhỏ
Chủ đề này được tranh luận thường xuyên vì nó phục vụ một mục đích khác nhau cho mỗi dự án. Một mặt, các nhà phát triển web dành rất nhiều thời gian để viết các bản định kiểu của họ. Không có cách nào để mã hóa loại dữ liệu văn bản gốc này và che giấu nó khỏi mắt rình mò. Nếu bạn đang cố gắng ngăn người khác ăn cắp mã của mình một cách trắng trợn thì điều tốt nhất bạn có thể làm là làm lộn xộn các kiểu và loại bỏ tất cả các ngắt / dấu cách dòng.
Quá trình này có thể được dán nhãn là thu nhỏ ma cua ban. Thông thường, các nhà phát triển sẽ viết CSS ở định dạng chuẩn và sau đó xóa tất cả các khoảng trắng trước khi tải lên máy chủ web. Sau đó, bạn có một bản sao cục bộ để chỉnh sửa nhanh chóng đồng thời cung cấp một phiên bản nhỏ hơn trên dự án trực tiếp. Phương pháp này rõ ràng có thể hữu ích để giảm tải trang cùng với việc giữ mã không tặc mã.
Liên kết tôi đã đăng ở trên dẫn đến Minify CSS có một số tài liệu đọc tuyệt vời về chủ đề này. Trang web cũng cung cấp một công cụ dựa trên trình duyệt để loại bỏ khoảng trắng và trả về khóa như vậy khỏi mã của bạn. CSS Compressor là một tùy chọn khác có giao diện đơn giản chạy trực tiếp trong trình duyệt web của bạn. Tôi cũng đã nghe thấy những điều hay về Clean CSS, mặc dù tôi chưa bao giờ sử dụng ứng dụng này.
Liên kết liên quan
Để giúp bạn tiếp tục phát triển, tôi đã cung cấp sáu liên kết hữu ích từ khắp nơi trên Web. Chúng không chỉ bao gồm ký hiệu tốc ký mà còn hướng dẫn và hướng dẫn hữu ích để truy cập khi thực hành mã CSS tốc ký mới này.
- Hướng dẫn cho người mới bắt đầu về CSS3
- Hướng dẫn viết tắt CSS
- Bạn có đang sử dụng CSS3 một cách phù hợp?
- Nội dung CSS và biểu đồ tương thích trình duyệt
- CSS3 + Tăng cường tiến bộ = Thiết kế thông minh
- Hoàn thành chỉ mục thuộc tính CSS / CSS3
Phần kết luận
Phải mất rất nhiều tâm huyết và thực hành viết mã CSS để xây dựng một lịch trình cụ thể mà bạn có thể theo dõi cho từng dự án. Hầu hết các nhà thiết kế web đều vui vẻ nhận các dự án và ý tưởng mới, vì vậy bạn chắc chắn sẽ tìm thấy thời gian để thực hành các mẹo mã hóa hữu ích này. Hãy thử sao chép một tờ tham chiếu nhỏ để thuận tiện cho bạn trong trường hợp bạn không thể tìm thấy bất kỳ trang cheat nào, hoặc tệ hơn nữa là bạn bị mất kết nối Internet!
Bạn có biết bất kỳ thuộc tính hoặc phím tắt CSS3 tiện dụng nào khác không? Chúng tôi rất thích nghe suy nghĩ và ý tưởng của bạn trong các ý kiến thảo luận. Các nhà phát triển web đang thúc đẩy tiêu chuẩn hóa nhiều hơn trong W3C và rõ ràng việc chuyển đổi đã trở nên dễ dàng hơn. CSS3 cung cấp những lợi ích tuyệt vời và nếu bạn có thể thành thạo mã hóa tốc ký, điều này sẽ giữ kích thước tệp của bạn ở mức thấp và ngăn chặn các bản sao khỏi việc đánh cắp mã của bạn.
