Data-animation

.animated {
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
.animated.hinge {
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeft {
0% {
opacity: 0;
-o-transform: translateX(-20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInRight {
0% {
opacity: 0;
-o-transform: translateX(20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-o-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-o-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
@-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
}
}
@-moz-keyframes fadeOutDown {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(20px);
}
}
@-o-keyframes fadeOutDown {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(20px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
-moz-animation-name: fadeOutDown;
-o-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
}
@-moz-keyframes fadeOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-20px);
}
}
@-o-keyframes fadeOutLeft {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
-moz-animation-name: fadeOutLeft;
-o-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
}
}
@-moz-keyframes fadeOutRight {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(20px);
}
}
@-o-keyframes fadeOutRight {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(20px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
-moz-animation-name: fadeOutRight;
-o-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}

http://jsfiddle.net/9aE2N/5/

<div id=”foo” data-animation=”fadeOutDown” style=”width:100px; height:100px; background-color:#ddd”>
</div>

Thuộc tính focus css

The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example:

textarea:focus {
    background: pink;
}

And here’s what that code looks like in action:

Any element (most commonly <input>s and <textarea>s) are in “focus” when they are selected and ready to enter text (like when a cursor is blinking.

nguồn :http://css-tricks.com/almanac/selectors/f/focus/

Những bài viết hữu ích cho front-end developers

  1. Việc phát triển Front-end lúc đầu có vẻ tưởng chừng rất đơn giản , nhưng để xây dựng một sản phẩm tốt , sạch , rành mạch về ngữ nghĩa và có khả năng tương thích với trình duyệt tốt theo tôi chắc chắn là một công việc khó khăn .

    Trong bài viết này , tôi đã biên soạn 10 bài thực hành tốt nhất mà theo tôi nó giúp ích rất nhiều cho mình trong 3 năm vừa qua .

    Giải thích đoạn div mà bạn đang đóng

    Phần lớn thời gian xem source của một website , Tôi thấy ở dưới cùng của trang web một danh sách dài vô tận các thẻ div đóng . Trong thực tế , nhiều lập trình viên mới vào nghề nghĩ rằng họ chỉ cần sử dụng những thẻ div thay cho bảng để tăng chất lượng của code .

    Các thẻ Div thường rõ hơn bảng nhưng chúng không có tổ chức , thuộc tính , nó có thể lộn xộn , hoặc rối rắm hơn là khi bạn làm việc với bảng .

    Sử dụng thụt đầu dòng là một khởi đầu tốt . nhưng một mẽo chắc chắn là sẽ giúp bạn tiết kiệm được rất nhiều thời gian là nhận xét (coment) các thẻ div mà bạn đang đóng như trong ví dụ dưới đây :

    Mã:
    <div id="header">
      <div id="sub" class="first left">
        ...
      </div><!-- #sub.first.left -->
    </div><!-- #header -->

    Sử dụng CSS reset

    Trừ phi bạn là một người mới bắt đầu hoặc bạn đã đi đến hoang đảo trong 6 năm vừa qua nếu không bạn sẽ biết đến sự hữu dụng của việc sử dụng CSS reset . Bởi vì theo mặc định trình duyệt không thiết lập các thuộc tính style ban đầu cho các thẻ HTML , sử dụng CSS reset sẽ giúp bạn chắc chắn rằng tất cả các thẻ không có style riêng do đó bạn có thể định nghĩa style cho chúng mà không cần quan tâm đến nhiều vấn đề có thể xảy ra khi chạy trên các trình duyệt khác nhau.

    Dưới đây là đoạn code CSS reset

    Mã:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    
    /* remember to define focus styles! */
    :focus {
        outline: 0;
    }
    
    /* remember to highlight inserts somehow! */
    ins {
        text-decoration: none;
    }
    del {
        text-decoration: line-through;
    }
    
    /* tables still need 'cellspacing="0"' in the markup */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
  2. Không sử dụng @import

    Các files css có thể được nhúng vào khi sử dụng trực tiếp @import .
    Nó có thể hữu ích khi

    Lấy một ví dụ : bạn muốn nhúng một stylesheet vào trong một cái khác . Một thực tế phổ biến là việc nhúng các files CSS vào trong trang html như đang sử dụng ở bên dưới :

    Mã:
    <style type="text/css>
      @import url('a.css');
      @import url('b.css');
    </style>

    Khi chúng chạy , việc dùng @import sẽ chậm load hơn rất nhiều so với các cách truyền thống khác như ở bên dưới :

    Mã:
    <link rel='stylesheet' type='text/css' href='a.css'>
    <link rel='stylesheet' type='text/css' href='proxy.css'>

    Nó sẽ không tạo ra sự khác biệt trên các web có lưu lượng truy cập thấp , nhưng nếu bạn có cơ hội sở hữu một trang web lớn, nổi tiếng thì đừng lãng phí thời gian của khách truy cập bằng việc sử dụng @import

  3. “Smush” hình ảnh của bạn

    Là một nhà phát triển, tôi luôn luôn thấy rằng tối ưu hóa hình ảnh của tôi cho các trang web không phải là dễ dàng. Tôi đã cố gắng dùng lệnh “Save for web” trong Photoshop, nhưng hầu hết là hình ảnh quá lớn hoặc không đủ chất lượng.

    Và thế là tôi đã có thói quen xấu của việc sử dụng hình ảnh không được tối ưu hoá trên trang web của tôi. Đây không phải là một vấn đề khi bạn không cần phải quan tâm đến băng thông của trang web, nhưng sau khi chuyển đổi gần đây của tôi về tôi vps( máy chủ riêng ảo ), tôi đã phải cẩn thận với kích thước hình ảnh.

    Tại thời điểm này, tôi tìm thấy một công cụ rất cool có tên Please login or register to view links : Bạn nhập url hình ảnh chưa được tối ưu hoá của bạn, và Smush It sẽ tạo ra một hình ảnh tối ưu hoàn hảo cho bạn. Bạn có thể tiết kiệm đến 70% kích thước tập tin, trong khi vẫn giữ chất lượng ban đầu. Ví dụ, tất cả các hình ảnh trong “Please login or register to view links” đều đã được “smush”.

    Không pha trộn CSS với HTML

    Như đã biết html là ngôn ngữ đánh dấu , tổ chức tài liệu bằng cách định nghĩa các header , footer , lists …

    Một thời gian trước đây , các nhà phát triển web front-end thường sử dụng các html attributes bị deprecated để tạo style cho một element .

    Ngày này , các style attribute cho phép nhúng trực tiếp CSS vào tài liệu html . Nó rất hữu dụng cho việc testing hoặc là khi bạn đang vội . Nhưng đó là một “bad practice” , nó đi ngược hoàn toàn với triết lý của CSS .

    Ví dụ sau đây minh họa như thế nào là code bẩn và khó khăn khi đọc một dòng code đơn giản có thể trở nên như vậy với style attribute:

    Mã:
    <a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Cats Who Code</a>

    Không pha trộn Javascript với HTML

    Cũng giống như nhúng mã html của bạn với css là xấu thực tế, bạn không nên sử dụng bất kỳ Javascript trong tài liệu html của bạn. Thực hành xấu sau đây minh họa một sự kiện onclick:

    Mã:
    <a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">Cats Who Code</a>
    

    Cùng một kết quả có thể đạt được bằng cách sử dụng unobstructed Javascript. Trong ví dụ này, tôi đang sử dụng jQuery framework:

    Mã:
    $(document).ready(function() {
    
      $('#cwc').click(function() {
        alert('I love this website');
      });
    });

    Điều này có thể có vẻ như có một chút khó khăn hơn lúc đầu, đặc biệt là cho người mới bắt đầu; nhưng nó chắc chắn là không, và nó sẽ giữ tài liệu html của bạn sạch sẽ.

    Sử dụng conditional comments:

    Như bạn đã biết nhiều người sử dụng trình duyệt IE phiên bản cũ vậy nên chúng ta phải tạo ra ứng dụng tương thích với nó .

    Để nhắm mục tiêu các phiên bản IE cụ thể , bạn có thể sử dụng IE hacks như ở dưới đây :

    Mã:
    height: 200px; /* normal browsers */
    _height: 300px; /* IE6 */
    .height: 250px; /* IE7 */
    *height: 350px; /* All IEs */

    IE hacks đôi khi có thể rất hữu dụng , nhưng nó không phải là cách tốt nhất cho việc nhắm mục tiêu cho một phiên bản cụ thể của IE , và nó sẽ là nguyên nhân gây nên các xác thực thất bại của CSS

    Thay vào đó bạn nên sử dụng những conditional comments dưới đây để nhắm vào phiên bản IE 6 :

    Mã:
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    <!--[if lte IE 6]>
      <link href="ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->

    Đặt file Javascript ở dưới bottom

    Một thực tế phổ biến của cuối thập niên 90 / đầu những năm 2000 là việc đặt các tập tin Javascript vào trong thẻ <head> và </ head> . Vấn đề là các tập tin javascript của bạn sẽ được nạp đầu tiên, và do đó nội dung của bạn sẽ được nạp sau.

    Bằng cách đặt các tập tin Javascript ở dưới cùng của tài liệu của bạn, bạn sẽ đảm bảo rằng các tập tin JS sẽ được nạp chỉ khi nội dung đã được hiển thị đúng.

  4. Sử dụng HTML theo ngữ nghĩa (semantically):
    HTML không phải là một ngôn ngữ lập trình. Nó là một ngôn ngữ đánh dấu, được sử dụng để tạo ra các tài liệu có cấu trúc bởi biểu thị ngữ nghĩa cấu trúc cho văn bản như tiêu đề, đoạn văn, danh sách, và nhiều hơn nữa.
    Điều quan trọng là việc sử dụng phần tử html theo ngữ nghĩa. Ví dụ, một trình đơn menu phải luôn luôn là một danh sách không có thứ tự:

    Mã:
     <ul>
    
       <li> <a href="#"> Trang chủ </ a> </ li>
       <li> <a href="#"> Giới </ a> </ li>
       <li> <a href="#"> Liên hệ </ a> </ li>
       <li> <a href="#"> Blog </ a> </ li>
    </ Ul>

    Kiểm thử ứng dụng của bạn khi đang xây dựng với các trình duyệt khác nhau

    Một trong những sai lầm lớn nhất mà tôi từng thực hiện khi phát triển html, CSS, và javascript là đã không kiểm tra trang web của tôi trên nhiều trình duyệt trong khi tôi đang viết chúng. Thay vào đó, tôi sử dụng để viết tất cả các code của tôi và chỉ xem trong Firefox để xem nó như thế nào.

    Về lý thuyết, điều này là tốt. Nhưng như bạn biết, các vấn đề tương thích trình duyệt (cross-browser) là một vấn đề lớn đối với các nhà phát triển front-end, đặc biệt là cho trình duyệt IE. Nếu bạn kiểm tra tài liệu của bạn trên Firefox / IE / Chrome trong khi bạn viết nó, sẽ giúp việc giải quyết vấn đề tương thích trình duyệt (cross-browser) của ứng dụng sẽ dễ dàng hơn nhiều . Tôi hy vọng mẹo cuối cùng này sẽ giúp bạn tiết kiệm thời gian quý báu của bạn.

nguồn: http://lamwebnhanh.net/threads/top-10-best-practices-bai-thc-hanh-tt-nhat-cho-cac-web-front-end-developers.1051/

CSS: How to specify table’s height such that a vertical scroll bar appears?

table {
  height: 500px;
  overflow-y: scroll;
}

EDIT:

Apparently <table> elements don’t respect the overflow property. This appears to be because <table> elements are not rendered as display: block by default (they actually have their own display type). You can force the overflow property to work by setting the <table> element to be a block type:

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

Note that this will cause the element to have 100% width, so if you don’t want it to take up the entire horizontal width of the page, you need to specify an explicit width for the element as well.

nguồn : http://stackoverflow.com/questions/4457274/css-how-to-specify-tables-height-such-that-a-vertical-scroll-bar-appears