It explains How to use different signs (+,> and ~) in CSS selector
and their differences. Before starting, let us take a sample code to
understand the signs.
It will target all P element which are direct children of container div, not children of child div.
+ Sign:
It is Adjacent sibling combinator. It combines two sequences of
simple selectors having the same parent and the second one must come IMMEDIATELY after the first.
It will only select the first element that is immediately preceded by
the former selector. In our example, it will target to Second ONLY
because the owner P element comes just after Div tag.
~ Sign:
It is general sibling combinator and similar to Adjacent sibling combinator. the difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that is preceded by the former selector.
Tính năng Media Query của CSS3 dự định sẽ mang lại một “kỉ nguyên”
mới của kĩ thuật thiết kế web mới trong năm 2012. Nhờ tính năng, các
trang web sẽ hiển thị linh hoạt hơn trên các loại thiết bị, độ phân giải
màn hình, kích thước trình duyệt khác nhau mà không cần phải sử dụng
bất kì mã xử lý javascript nào. Kĩ thuật thiết kế này được gọi là
Responsive Web Design và được ứng dụng rất phổ biến trên thế giới.
CSS2: Media Type
Phiên bản CSS 2 mặc dù chưa hỗ trợ Media Query nhưng cũng đã hỗ trợ các Media Type. Tính năng này cho phép xác định các định dạng cho mỗi loại thiết bị nhưng không linh hoạt và rất hạn chế.
Media Type
Description
All
Used for all media type devices
Aural
Used for speech and sound synthesizers
Braille
Used for braille tactile feedback devices
Embossed
Used for paged braille printers
Handheld
Used for small or handheld devices
Print
Used for printers
Projection
Used for projected presentations, like slides
Screen
Used for computer screens
Tty
Used for media using a fixed-pitch character grid, like teletypes and terminals
Tv
Used for television-type devices
Trong cùng một style sheet, bạn có thể sử dụng các luật (hoặc chỉ thị) @media để quy định loại thiết bị nào sẽ được áp dụng bởi các khối định dạng CSS bên trong mỗi luật đó.
Ví dụ như đoạn style sheet sau sẽ thiết lập chiều rộng của trang web
là 800px khi được xem trên máy tính và 300px khi xem trên các thiết bị
cầm tay. Cả hai loại thiết bị này đều hiển thị font-weight của các thẻ
là bold.
01
CSS3 : Media Query
Media Query là một bước cải tiến của luật @media bằng cách kết hợp
Media Type và các thông số khác như độ phân giải, kích thước, màu sắc,…
để tăng thêm tính chặt chẽ và linh hoạt của các luật này. Mỗi luật của
Media Query là một biểu thức logic và chỉ được áp dụng khi nó có giá trị
true.
Các Media Query có thể được sử dụng bằng các cách dùng thẻ
trong HTML hoặc thẻ trong XML,
ngoài ra thì trong HTML bạn có thể dùng các luật @import và @media. Các
ví dụ sau sẽ áp dụng style css cho các loại máy vi tính và hỗ trợ màu:
1
"stylesheet"type="text/css"href=" example.css"media="screen and (color)">
2
3
"screen and (color)"rel="stylesheet"href="example.css"?>
4
5
@import url(style.css) screenand (color);
6
7
@media screenand (color) and (min-width:400px) {
8
9
}
Một Media Query được tạo thành từ một Media Type và không hoặc nhiều expression (biểu thức) nối với nhau bằng toán tử and. Cấu trúc của một Media Query có dạng:
- Media Feature: bao gồm các thuộc tính như width, height,
device-width, device-height, color, resolution, … Các thuộc tính này
thường được thêm các tiếp đầu ngữ min- hoặc max- để xác định phạm vi ảnh
hưởng của thuộc tính trong Media Query.
number of bits per pixel in a monochrome frame buffer
resolution
resolution (“dpi” or”dpcm”)
yes
resolution
scan
“progressive”or”interlaced”
no
scanning process of ”tv”media types
width
length
yes
width of the rendering surface
- Expression: bao gồm một Media Feature và không hoặc một giá trị của nó được ngăn cách bởi dấu hai chấm “:”. Mỗi Expression được bao trong cặp ngoặc đơn.
Ví dụ: (color) và (min-width : 200px).
Nhiều expression nối với nhau bằng toán tử and: (color) and (min-width : 200px)
- Media Type: Tham khảo bảng ở phần trên.
- Media Query: Bắt đầu bằng một Media Type và theo sau là một chuỗi Expression cũng được nối với nhau bằng toán tử and.
- Các Media Query có thể được nối với nhau bằng dấu phẩy “,”, tương tự như khi dùng selector của css.
Ngoài ra bạn có thể sử dụng thêm hai toán tử là not và only vào đầu Media Query. Công dụng của hai toán tử này:
-Toán tử not giúp đảo ngược giá trị của Media Query. Toán tử này có độ ưu tiên thấp nhất nên sẽ được tính cuối cùng.
-Toán tử only giúp ẩn các style sheet trên các trình duyệt không hỗ trợ Media Query.
Demo: Thiết kế một trang web theo Responsive Design
Trình duyệt với kích thước >800px: Khi thu nhỏ width lại bạn sẽ thấy vị trí sidebar thay đổi và biến mất nếu như nhỏ hơn 400px:
Mã nguồn hoàn chỉnh:
01
<html>
02
<head>
03
<title>Responsive Design Demo</title>
04
05
<styletype="text/css">
06
header, section, aside, footer {
07
background: wheat;
08
border: 1px solid gray;
09
margin: 2px;
10
font-family: Sans-serif;
11
font-size: 1.6em;
12
font-style: bold;
13
}
14
aside, section {
15
height: 300px;
16
}
17
footer{
18
clear: both;
19
}
20
21
/* Media queries */
22
23
@media screen {
24
section {
25
width: auto;
26
float: none;
27
}
28
aside {
29
display: none;
30
}
31
}
32
@media screen and (min-width: 400px) {
33
section {
34
width: auto;
35
float: none;
36
}
37
aside {
38
width: auto;
39
height: 200px;
40
float: none;
41
display: block;
42
}
43
44
}
45
46
@media screen and (min-width: 800px) {
47
section {
48
width: 78%;
49
float: left;
50
}
51
aside {
52
width: 20%;
53
height: 300px;
54
float: right;
55
display: block;
56
}
57
}
58
</style>
59
</head>
60
61
<body>
62
<header>
63
Header
64
</header>
65
66
<section>
67
Main Content
68
</section>
69
70
<aside>
71
Sidebar
72
</aside>
73
74
<footer>
75
Footer
76
</footer>
77
</body>
78
</html>
Tham khảo cú pháp hoàn chỉnh của Media Query tại: https://developer.mozilla.org/en/CSS/media_queries
YinYang’s Programming.
(http://yinyangit.wordpress.com/2012/02/18/css3-media-query-va-responsive-web-design/)
Grid System là một thuật ngữ được dùng để chỉ phương pháp sắp đặt các
thành phần HTML theo dạng lưới dựa trên CSS. Một Grid System rất quen
thuộc và được áp dụng phổ biến là 960 Grid.
960 Grid hỗ trợ hai loại là 12 và 16 cột. Ngoài ra, bạn có thể sử dụng
một Grid System tương tự cho phép bạn xác định số cột tùy ý, đó là Variable Grid System.
960 Grid System
Xem Demo: http://960.gs/demo.html
Download: http://github.com/nathansmith/960-Grid-System/zipball/master
Cái tên bắt đầu với con số 960 là do Grid System này cố định chiều rộng
của trang web là 960px. Với loại 12 cột thì mỗi cột sẽ có chiều rộng là
60px và tương tự là 40px cho loại 16 cột. Ở đây tôi chỉ đề cập đến loại
12 cột (16 cột cũng tương tự).
Bạn có thể thắc mắc tại sao chỉ là 60px với 12 cột (bởi vì 12 * 60px =
720px)? Câu trả lời là bởi vì các cột không nằm sát nhau mà chúng cách
nhau 20px, hay nói cách khác, một cột sẽ có margin trái và phải là 10px. 12 * 60px + 12 * 20px = 960px
Mỗi ô của Grid System thường là một thẻ div (hoặc bất kì thẻ nào bạn muốn) được gắn class là grid_x.
Trong đó là x là một số xác định chiều rộng của ô (từ 1 đến 12). Ví dụ
chiều rộng của thẻ div tương ứng với mỗi class là (xem hình minh họa): grid_1: 60px grid_2: 140px grid_3: 220px …
Để chứa một Grid System, bạn cần tạo một thẻ div “container” với class có dạng container_x.
Giá trị x ở đây là số lượng cột tối đa mà Grid System hỗ trợ, nghĩa là
container_12 đối với loại 12 cột. Các ô bên trong sẽ tự động xuống hàng
mới khi vượt quá số lượng cột của container.
Để bắt buộc tạo hàng mới, bạn có thể thêm vào các thẻ div có class=”clear”.
Ví dụ sao tạo ra một lưới với ba hàng. Bạn sẽ thấy hàng thứ hai mặc dù
chỉ có một thẻ div rộng 140px nhưng nó vẫn xuống hàng mới.
01
<divclass="container_12">
02
<divclass="grid_12">
03
<p> 940 </p>
04
</div>
05
<divclass="grid_2">
06
<p> 140 </p>
07
</div>
08
<divclass="clear"></div>
09
<divclass="grid_1">
10
<p> 60 </p>
11
</div>
12
<divclass="grid_11">
13
<p> 860 </p>
14
</div>
15
</div>
Các thuật ngữ
Push và Pull:
- Mặc định các ô trong lưới sẽ nằm cách nhau theo chiều ngang một khoảng
cố định là 20px. Tuy nhiên bạn có thể muốn “đẩy” (push) hoặc “kéo”
(pull) một ô nào đó để nó nằm đè lên ô khác nhằm tạo ra một layout linh
hoạt. Grid System cung cấp cho bạn các class có tên là push_x và pull_x
(x là số cột). Ví dụ:
push_2: đẩy về bên phải 2 cột.
pull_2: kéo sang bên trái 2 cột. Prefix và Suffix:
- Quy định khoảng cách trước và sau giữa các ô. Ví dụ: prefix_1, suffix_2 Alpha và Omega
- alpha: loại bỏ margin phía trước.
- omege: loại bỏ margin phía sau.
Variable Grid System
Dựa trên 960 Grid System, bạn có thể dễ dàng tạo ra một Grid System với số lượng, kích thước của cột, gutter tại http://grids.heroku.com/:
Tóm lại, trong khi chờ đợi Flexbox của CSS3 được hỗ trợ đầy đủ, bạn nên sử dụng Grid System cho các dự án của mình để đơn giản hóa việc tạo các giao diện.
YinYangIt’s Blog
(http://yinyangit.wordpress.com/2012/07/19/css-tim-hieu-ve-grid-system/)
YouTube's new iFrame player is a nice refresh to the ugly embed code
that we have been using, but if you are placing it on pages with content
that overlaps or overlays on each other or uses things like lightbox,
you may notice that the videos appear on top of content. It's very easy
to fix the issue when we use the standard embed code by simply adding a
paramater to the code itself. With this new code, we simply don't have
the ability to edit the code directly, but the YouTube team has made it
easy for us to control this.
Default Embed Code:
Modified Embed Code:
To fix this, we simply add a small snippet to the end of the URL to
let the page know that we want it to add these paramaters. Add
"?wmode=opaque" to the end of the URL.
Hope this helps someone - took me a while to find it. Enjoy! Update: If this doesn't seem to work in Chrome, try wmode=transparent instead of wmode=opaque!
Update 2: Automate This With jQuery!
A user posted a jQuery code snippet in the comments that allows us to
dynamically make this change! I have not tested this personally, but it
looks like it should work fine - jQuery is required for this to work
and I reccomend posting this in a $(document).ready(); function or at
the bottom of your page.
$("iframe").each(function(){
var ifr_source = $(this).attr('src');
var wmode = "?wmode=transparent";
$(this).attr('src',ifr_source+wmode);
});
This code will automatically apply itself to EVERY iframe element -
so if you use iframes frequently ( Facebook Like Buttons, anyone? ), you
may want to use jQuery to check to see where the URL is coming from.
This is a basic snippet posted to get you started that will take every
iframe on the page and adds '?wmode=transparent' to the end of it - it's
quick and easy! Update Again: This code snippet will check to see if
there is already a query string present - if so, it will simply append
the new string and value pair.
$("iframe").each(function(){
var ifr_source = $(this).attr('src');
var wmode = "wmode=transparent";
if(ifr_source.indexOf('?') != -1) $(this).attr('src',ifr_source+'&'+wmode);
else $(this).attr('src',ifr_source+'?'+wmode);
});
Update To That: If you want to place our wmode parameter to the beginning of the query string, we can do something like the following:
$(document).ready(function() {
$("iframe").each(function(){
var ifr_source = $(this).attr('src');
var wmode = "wmode=transparent";
if(ifr_source.indexOf('?') != -1) {
var getQString = ifr_source.split('?');
var oldString = getQString[1];
var newString = getQString[0];
$(this).attr('src',newString+'?'+wmode+'&'+oldString);
}
else $(this).attr('src',ifr_source+'?'+wmode);
});
});
(Thanks to Michael O for perfecting that last snippet.
Update 3: Concatenating With An Existing String
As one of my readers points out, some of your URLs will already have a query string attached. As an example:
http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0
If you were to attach "?wmode=opaque," it probably would not work. To
get around this, simply use an & instead of a ? to add on to what
we would call the query string.
.transparent {/* Required for IE 5, 6, 7 *//* ...or something to trigger hasLayout, like zoom: 1; */
width:100%;/* Theoretically for IE 8 & 9 (more valid) *//* ...but not required as filter works too *//* should come BEFORE filter */-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* This works in IE 8 & 9 too *//* ... but also 5, 6, 7 */
filter: alpha(opacity=50);/* Older than Firefox 0.9 */-moz-opacity:0.5;/* Safari 1.x (pre WebKit!) */-khtml-opacity:0.5;/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity:0.5;}
1. auto: the table is layed out normally (see below). This is the default value. 2. fixed: the table obeys the width, even if it normally wouldn't.
Let's give the test table a width. This width is far too narrow to normally show all content, and therefore the table stretches up beyond the 100px. This is normal behaviour: widths on tables have always been more like a polite advice than a strict rule. If the table needs more space than the width allows, it takes more space.
< table style="width: 100px;" >
If we add table-layout: fixed, however, the table obeys the width, even if that results in unreadable content.
