[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

[CSS] Công cụ sinh mã màu tự động - Color Code Genarator

Trước đây khi thiết kế Style cho website bạn thường dùng cách nào để sinh ra mã màu phù hợp cho từng đối tượng? Dùng Dreamweaver, Photoshop hay là tự ước lượng màu (o_0)??? Chắc hẳn những công cụ, cách làm đấy rất phức tạp (nhất là khi đang code ở 1 trình không phải Dreamweaver, Notepad++ hay trình biên tập dành riêng cho thiết kế web khác)
Mình xin giới thiệu tới các bạn 2 công cụ rất hữu ích trong việc chọn mã màu phù hợp trong việc thiết kế CSS, hơn nữa hai công cụ này rất tiện lợi, bạn có thể sử dụng trực tiếp trên trang này mà không cần phải cài đặt hay thiết lập gì cả

Thứ nhất, công cụ sinh mã màu này sẽ không còn là lạ lâm gì với những người quen sử dụng Photoshop, hay sử dụng Photoshop để sinh mã màu. Bạn chỉ cần kéo thành "Hue" rồi chọn màu phù hợp. Cách khác bạn có thể sửa mã màu trực tiếp trong các ô điều khiển ở dưới, màu tương ứng sẽ hiển thị ở trên. Bây giờ chỉ cần chọn màu tương tự thích hợp với ý đồ thiết kế.
Sau khi chọn xong màu để lấy mã màu chỉ cần Copy mã màu ở ô điều khiển phía dưới.

Thứ hai, công cụ này cũng có chức năng tương tự cái trên, bạn chọn 1 màu trong các màu mẫu có sẵn, hoặc điền mã màu vào ô >> chọn "Update". Công cụ sẽ hiển thị màu tương ứng với mã màu đã nhập vào cùng các màu cùng tông màu. Để lấy mã màu bạn cũng chỉ việc chọn và copy mã màu trong ô TextBox

Hy vọng nó sẽ hữu ích!!

>> Xem chi tiết

[CSS] Gradients trong CSS3

Gradients là một thành phần rất hữu ích, được hỗ trợ trong CSS3.
Trước đây khi muốn có một background đổ màu gradient (chuyển từ màu này sang màu kia trên 1 thành phần, chẳng hạn nút ấn có hiệu ứng nền gradient để trông như là nổi lên trên...) thường thì bạn phải vẽ 1 cái ảnh có đổ màu như ý rồi đặt cho nó làm nền!!?
Bây giờ CSS3 đã hỗ trợ những tính năng này giúp bạn có thể tạo những background cực kỳ ảo diệu   :D

Các thuộc tính và trình duyệt hỗ trợ

Property
linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-
repeating-linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
repeating-radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-

I. Linear Gradients 

Linear Gradient - Từ trên xuống dưới (đây là giá trị mặc định)

#grad
{
    background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, blue); /* Standard syntax */
}

Linear Gradient - Từ trái sang phải

.grad
{
    background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, red , blue); /* Standard syntax */
}

Linear Gradient - Theo đường chéo

#grad
{
    background: -webkit-linear-gradient(left top, red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, red, blue); /* Standard syntax */
}

Linear Gradient - Dùng góc tùy chỉnh

#grad
{
    background: -webkit-linear-gradient(160deg, red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(160deg, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(160deg, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(160deg, red, blue); /* Standard syntax */
}

Linear Gradient - Nhiều màu

#grad
{
 /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* For Fx 3.6 to 15 */
    background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* Standard syntax */
    background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

Linear Gradient - Dùng màu trong suốt

#grad
{
 background: -webkit-linear-gradient(left,rgba(255,0,0,0.3),rgba(255,0,0,1)); /*Safari 5.1-6*/
 background: -o-linear-gradient(right,rgba(255,0,0,0.3),rgba(255,0,0,1)); /*Opera 11.1-12*/
 background: -moz-linear-gradient(right,rgba(255,0,0,0.3),rgba(255,0,0,1)); /*Fx 3.6-15*/
 background: linear-gradient(to right, rgba(255,0,0,0.3), rgba(255,0,0,1)); /*Standard*/
}

Linear Gradient - Lặp lại

#grad
{
/* Safari 5.1 to 6.0 */
 background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
 background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 to 15 */
 background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Standard syntax */
 background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

II. Radial Gradients

Radial Gradient - Cú pháp chính

background: radial-gradient(center, shape size, start-color, ..., last-color);

Ví dụ

#grad
{
 background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
 background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
 background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
 background: radial-gradient(red, green, blue); /* Standard syntax */
}

"shape" ở đây là quy định hình dạng cho radial có thể là: "ellipse" hoặc "circle"

#grad
{
 background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
 background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
 background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
 background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
}

III. Tạo chữ với hiệu ứng Gradient

Tạo chữ được đổ màu Gradient

Gradient Text

h1.grad
{
 /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* For Fx 3.6 to 15 */
    background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* Standard syntax */
    background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    text-fill-color: transparent;
}

Bạn có thể vào trang này để tự tạo cho mình những mẫu gradient nhanh chóng, trực quan.

Enjoy!!

>> 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