[Web] Chuẩn hóa, rút gọn CSS & JavaScript

Trong thiết kế web hẳn nhiều lúc bạn viết ra được những file CSS, JS rất dài nhưng bạn không chắc rằng nó đã đúng chuẩn chưa, hợp SEO chưa hoặc bạn muốn rút gọn nó để giảm kích thước file???

Rất đơn giản, sau đây tôi sẽ hướng dẫn các bạn cách chuẩn hóa, rút gọn CSS và JavaScipt của mình.

I. Chuẩn hóa

- Với CSS thì chắc hẳn bạn cũng đã biết mỗi trình duyệt có 1 cách thức xử lý CSS khác nhau, do đó đôi khi bạn phải viết nhiều lần code CSS chỉ với 1 mục đích nào đó, để có thể tương tác với các các browser tốt nhất. Đơn giản nhất là các hiệu ứng như animation, transform, border-radius... đặc biệt là các thuộc tính của CSS3 thì với mỗi loại trình duyệt phải có 1 loại code tương ứng. 

-webkit-, -o-, -moz-... là các tiếp đầu ngữ gắn với thuộc tính CSS để đáp ứng các trình duyệt. Chẳng hạn như với Chrome thì nó sử dụng tiếp đầu ngữ -webkit-: -webkit-transform, -webkit-gradient... Với IE thì là -moz-, với Opera thì là -o-...

Chẳng phải nhớ hết và code hết chúng vì đã có công cụ giúp ta làm điều này. Tức là bạn chỉ cần code 1 version và sử dụng công cụ để nó tự động thêm các version khác. Công cụ tại trang web này.

- Với JavaScript bạn có thể có nhiều công cụ để kiểm tra độ chính xác của code như kiểm tra lỗi cú pháp... 

Bạn có thể sử dụng trang web này. JSLint là công cụ rất hữu ích và chính xác.

II. Rút gọn

Với 1 trang web lớn thì kích thước các file CSS, JS có thể là rất lớn và bạn lo ngại nó sẽ làm giảm tốc độ tải trang, gây phiền phức cho người xem. Hoặc bạn mất nhiều công sức để có thể nghĩ ra những dòng code thâm hiểm và không muốn ai soi mói. Đơn giản là việc rút gọn code sẽ làm điều này.

Việc rút gọn code sẽ loại bỏ những dòng comment trong file, những dầu xuống dòng thừa thãi hay những dấu cách chẳng có tác dụng gì, tối ưu các tên biến, cách thức tổ chức code để nhằm rút gọn tối đa nội dung của file gốc mà không làm mất đi những chức năng vốn có của nó. Việc làm code trở thành "một dòng duy nhất" cũng có 1 tác dụng là hạn chế sự soi mói của các coder gà mờ (mình chỉ nói là hạn chế và với các coder newbie thôi nhá). Nhưng tóm lại tác dụng lớn nhất của nó là làm giảm kích thước file, thậm chí có thể làm tăng tốc độ đọc file của trình duyệt.

Với CSS

Thì những việc mà rút gọn có thể làm như: chuyển "0px" thành "0", xóa comment, xóa các dấu Enter, dấu cách thừa (chẳng hạn border: 1px solid; => border:1px solid;) => file với 1 dòng duy nhất, gộp các thuộc tính cùng loại với nhau...

Các bạn có thể sử dụng các công cụ online: http://cssminifier.com/ hoặc http://gpbmike.github.io/refresh-sf/.

Như vậy sau khi chuẩn hóa ở trên + rút gọn là bạn có thể có được 1 file CSS tối ưu.

Đôi khi bạn muốn biến đổi ngược file đã rút gọn lúc trên, tức là biến nó về dạng thông thường, có xuồng dòng, tab đúng chuẩn... thì bạn có thể vào đây.

Với JavaScript

Việc rút gọn nội dung JavaScript có thể thực hiện: xóa các dấu Enter, cách không cần thiết, rút gọn các biến cục bộ (thành a, b, c, d...), rút gọn các hàm...

Các công cụ online tại http://jscompress.com/ hoặc http://gpbmike.github.io/refresh-sf/

Tương tự như với CSS bạn cũng có thể chuẩn hóa code JavaScript với công cụ này.

>> Xem chi tiết

[WEB] Thủ thuật tạo nút chuyển lên đầu trang mượt mà cho trang web

JQuery là 1 thư viện JavaScript có nhiều chức năng, nó hỗ trợ việc lập trình web trở nên đơn giản, tạo ra nhiều hiệu ứng đẹp mắt cho website. JQuery hỗ trợ việc rút gọn code javascript, nó tạo ra những hàm, thủ tục sẵn có để lập trình viên không cần phải tự viết quá nhiều dòng lệnh phức tạp. Nhờ Jquey ta có thể xây dựng các hiệu ứng đẹp mắt cho website mà không tốn quá nhiều công sức cho việc lập trình.

       Trong bài viết này tôi sẽ giới thiệu đến các bạn cách tạo 1 nút chuyển lên đầu trang với hiệu ứng mượt mà đẹp mắt cho website của bạn.

         

Trước hết phần HTML hiển thị cơ bản của nút này là 1 link được đặt trong thẻ <a></a>

<a class='toTop' href='#toTop' title='Lên trên'></a>

Thẻ <a> này ta đặt thuộc tính lớp là "toTop", để thiết lập thuộc tính css.
Trong phần CSS ta đặt các thuộc tính như sau:

/* Croll to top */
.toTop
{
 width: 46px;     /* Chiều rộng của nút */
 height: 46px;
 display: none;
 position: fixed;
 background: url(https://sites.google.com/site/nvnhan2910/images/toTop.png) 0 0 no-repeat;    /* đặt ảnh nền cho nút (là 1 cái hình mũi tên lên chẳng hạn) */
 cursor: pointer;
 top: 70%;
 right: 10px;
 opacity: 0.5;    /* độ mờ của nút khi chưa di chuột vào */
 -ms-filter: "alpha(opacity=50)";
 filter: alpha(opacity=50); 
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 z-index: 999;
}
.toTop:hover, .toTop:focus
{
 transition: 0.2s;   /* Tạo độ trễ bằng css3 */
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
 opacity: 1;    /* Hiển thị hoàn toàn khi di chuột lên */
 -ms-filter: "alpha(opacity=100)";
 filter: alpha(opacity=100); 
 -moz-opacity: 1;
 -khtml-opacity: 1;
}

Còn đây là phần để tạo hiệu ứng cho nút trượt - đó chính là sử dụng JavaScript cùng với JQuery. Bạn nên đặt phần này vào phần header của trang web:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>  <!-- Khai báo địa chỉ của thư viện JQuery -->
<script type='text/javascript'>
// Java scroll to top

 $(function(){
 $.fn.scrollToTop = function(){
  $(this).hide().removeAttr("href");   // Xóa thuộc tính "href" trong phần HTML
  if($(window).scrollTop()!="0"){ $(this).fadeIn("slow") }
  var scrollDiv=$(this);
  $(window).scroll(function(){   // Sự kiện trượt trang web
   if ($(window).width() < 1100) {
   $(".toTop").hide();
   return;
  }
  if ($(document).scrollTop() < $(window).height()) {
   $(".toTop").fadeOut("slow");   // ẩn nút
  } else {
   $(".toTop").fadeIn("slow");    // Hiện nút
  }
  });
  $(this).click(function(){ // Sự kiện click nút
   $("html, body").animate({scrollTop:0}, "slow")   // Tạo hiệu ứng chuyển mượt
  })
 }
});
 $(function() { $(".toTop").scrollToTop(); });

// Khi resize cửa sổ trình duyệt
$(window).resize(function () {
 if ($(window).width() < 1100) {
  $(".toTop").hide();
  return;
 }
});
</script>

Kết quả tạo ra giống như trang web này đang sử dụng
Chúc bạn thành công!

>> Xem chi tiết