Bày tỏ IT

Hôm qua, giống như mọi "Ngày Hog đất" khác, tôi đã được làm việc trên một số bố trí CSS / tableless. Tất cả sẽ tốt trong IE 7, FF 3 và Chrome, cho đến khi đột nhiên, tôi thấy một số lợi nhuận chưa ignorable nhìn thấy chỉ trong Google Chrome. Mặc dù rất kỳ lạ và worring, Đó là một số lỗi / vấn đề mới mà tôi đã đi qua, cuối cùng cũng đã có một số gia vị trong công việc trần tục của tôi. Sad (nhưng tốt đẹp) đã cố định trong vòng vài phút của tàu thăm dò ...

Về cơ bản, Nó trông giống như Google Chrome bỏ qua CSS Đặt lại (margin: 0px). Nó thực sự được gây ra bởi các stylesheet đại diện người sử dụng (-webkit-padding-bắt đầu: 40px). Vì vậy, các giải pháp đã được thiết lập lại phong cách này bằng cách thiết lập padding: 0 hỏng yếu tố.
Một cách tốt để ngăn chặn vấn đề này xảy ra với bất kỳ yếu tố là sử dụng một phần còn lại CSS toàn cầu như sau

* {Margin: 0; padding: 0;}

User Agent Style Sheets (Đặc điểm kỹ thuật) là gì?
Trích đoạn sau đây được lấy từ http://meiert.com/en/blog/20070922/user-agent-style-sheets/ liên kết tiếp theo, để đọc thêm về Sheets (US) Agent tài

CSS 1 giới thiệu các ý tưởng bằng cách nói rằng mỗi User Agent (UA, thường là một trình duyệt web "hoặc" khách hàng web ') sẽ có một phong cách trang mặc định mà trình bày các tài liệu một cách hợp lý - nhưng cho là nhàm chán - cách. CSS 2 nói rằng các đại lý người sử dụng phù hợp phải áp dụng 1 tấm phong cách mặc định (hoặc cư xử như thể họ có) và rằng mặc định bảng phong cách 1 đại lý người sử dụng của cần trình bày các yếu tố ngôn ngữ tài liệu có đáp ứng kỳ vọng trình bày chung cho các ngôn ngữ tài liệu; CSS 3 là có thể có cùng một tâm trí.

Kể từ khi các chi tiết kỹ thuật CSS để nó để triển khai có sử dụng một phong cách trang "thực sự" để hiển thị mặc định hay không, nó không đáng ngạc nhiên mà bạn không tìm thấy một phong cách trang mặc định trong thư mục cài đặt của mỗi trình duyệt. Không giống như Internet Explorer của Microsoft cũng như Opera, ví dụ (và như xa như tôi biết), Gecko trình duyệt như Firefox và Netscape Navigator (nhìn cho "html.css") mà còn Konqueror làm cho nó khá đơn giản để hiểu được phong cách mặc định của họ.

Điều này những trường học cũ, nhưng như thường lệ nó là bổ sung bộ nhớ của tôi ...
Vì vậy, bị vô hiệu hóa = "true" và vô hiệu hóa = "false"?
... Không tin, cũng! thats nó là ... đây là một số lời giải thích nhanh chóng ...
"Vô hiệu hóa" là một thuộc tính của bất kỳ yếu tố hình thức / lĩnh vực và do đó có thể chấp nhận bất kỳ giá trị bởi bản chất của nó.

Miễn là thuộc tính này là hiện nay, yếu tố sẽ được vô hiệu hóa bất kể giá trị của nó. cho ví dụ.
<input type="text" value="This disabled" disabled>
<input type="text" value="This disabled" disabled="disabled">
<input type="text" value="This disabled" disabled="true">
<input type="text" value="This disabled" disabled="false">

Tất cả các bên trên sẽ làm cho các lĩnh vực này dưới hình thức "DISABLED".

Đơn giản chỉ cần không cung cấp các thuộc tính "Disabled" giữ Field "ABLED" ... như dưới đây

<input type="text" value="This không disabled" />

Ghi "Bất kỳ giá trị (hoặc không có giá trị ở tất cả) của các thuộc tính tàn tật, trình duyệt sẽ làm vô hiệu hóa nó". Để giữ cho mọi thứ rõ ràng trong tâm trí của chúng tôi W3C khuyến nghị rằng chúng ta sử dụng vô hiệu hóa = "khuyết tật" trong những tình huống này.

Đây là sự khác biệt mặc dù khi chúng ta sử dụng thuộc tính này trong javascript ...

document.form.element.disabled = true; / / phần tử sẽ được vô hiệu hóa
document.form.element.disabled = false; / / phần tử sẽ được kích hoạt

Những lập luận trên cũng đúng đối với các thuộc tính và các yếu tố:

• kiểm tra (nút radio và hộp kiểm)
• lựa chọn (tùy chọn)
• nowrap (td)

Google bắt đầu một người dân di chuyển dấu nhắc để đổ IE6 ... người sử dụng bugging IE6 với POPUP vào tải trang ... có thể không phải là một ý tưởng rất tốt ... nhưng là một nhà phát triển giao diện người dùng, tôi có tham gia wagon ban nhạc ... một trình duyệt cho tôi lo lắng về ... Xin lỗi nó là ích kỷ! nhưng tôi đã bao gồm javascript này ... (TRY TRANG NÀY TRONG IE6) ...
Hey! và lưu ý sáng ... nó là một màn hình hiển thị POWER JAVASCRIPT .... thậm chí nó có thể mang lại một người khổng lồ (hoặc một khi nó đã được)

SO ... Trợ giúp thoát khỏi thế giới của IE6 với một dòng javascript!

http://code.google.com/p/sevenup/

Với một trình duyệt khác để chăm sóc từ ngày mai! (IE8 đi kèm của ngày mai nhà nước Beta) ... thực sự cao IE6 thời gian của nó được cho Long chết Mercy Do ... Kỳ chúng tôi đứng cho sự sụp đổ của IE6

IE6 là 4 Netscape mới. Các hacks cần thiết để hỗ trợ IE6 đang ngày càng được xem như là vận chuyển hàng hóa dư thừa. Giống như Netscape 4 năm 2000, IE6 được nhận thức được giữ lại các trang web. "

Jeff Zeldman, tiêu chuẩn guru

Và trong khi đó đối với những người như tôi sẽ bị ngập nước với các cuộc gọi phá vỡ CSS bố trí trong IE8, ở đây là công việc cũ xung quanh / sửa chữa bằng cách sử dụng Meta Tags (meta http-equiv = "X-UA-Tương thích"), bạn có thể thử ...

Mis-hành xử IE8: CSS Layout vỡ (Nhắm mục tiêu một phiên bản trình duyệt bằng cách sử dụng Meta Tags trong IE8)

Heres một mảnh nhỏ của Javascript thủ đoạn gian trá mà tôi đã phải đào xung quanh bởi vì tình hình commaned. Trong một trong các trang web của tôi, tôi đã có tình trạng này, nơi tôi đã phải thực hiện "windows.onload" hai lần. Điều đầu tiên mà có thể đến với một tâm trí thiếu kinh nghiệm như tôi (tôi phải thành thật nói rằng, kể từ khi tôi đã được sử dụng các khuôn khổ và thư viện javascript, tôi đã forgotton để làm những việc đơn giản ... của riêng tôi buồn nhưng thật sự), là phương pháp sau đây ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 vv ..

Xin lỗi để nói nhưng, điều này sẽ không làm việc ... không muốn thảo luận về các khoa học thực hiện Javascript nhiều ... nhưng theo kinh nghiệm gần đây của tôi, chỉ có chức năng cuối cùng (onloadfn3) sẽ bị bệnh thực sự có được thực hiện.

Trong tình huống bình thường, không giống như tôi (mà tôi sẽ nói về một chút sau này) ... bạn có thể làm một trong những điều sau đây để thực hiện các chức năng onload mutliple ....

HOẶC một cái gì đó như thế này

 doOnLoad chức năng () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Đối với tình hình hiện tại của tôi, tôi không thể sử dụng một trong các bên trên ...
Tại sao tôi cần phải gọi windows.onload hai lần, thay vì gọi hai chức năng trong một chức năng onload? Dưới đây là nhanh chóng xem xét báo cáo vấn đề của tôi ...

"Trang My Site được cấu trúc giống như các chủ đề Wordpress .... tức là có một các header.php phổ biến và Footer.php được bao gồm vào tất cả các trang. Có là một chức năng onload implementaion trong các Footer.php để làm một số chức năng onload phổ biến. , Có vài trang cần một cái gì đó onload của mình, ngoài những người thực hiện bởi các chức năng onload chung. Nếu tôi chỉ định chức năng gọi lại trực tiếp xử lý window.onload, nó sẽ qua đi xe các callbacks trước đây được giao trong Footer.php "

.... Vấn đề của tôi có hiểu ?

Vâng! có những giải pháp mà tôi đã tìm thấy. Họ tất cả đều rất giống nhau và chủ yếu implementions của một giải pháp được đưa ra bởi Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Giải pháp:

Đơn giản chỉ cần thêm đoạn mã javascript vào trang web ...

 addLoadEvent chức năng (Func) {
     var oldonload = window.onload;
     if (typeof window.onload = 'chức năng') {
        window.onload = func
     } Else {
        window.onload = function () {
            if (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

Và gọi nó là thay vì "windows.onload" thông thường

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Nhiều mã chạy trên trang * tải
 }); 

Ưu điểm của đoạn mã này ...
1. Chủ yếu, Nó cho phép bạn có nhiều sự kiện windows.onload, kêu gọi từ các bộ phận riêng biệt của mã của bạn, mà không overridding định nghĩa trước
2. Nó thực sự là không phô trương. Nó có thể được đặt trong một tập tin với các kịch bản khác của bạn hoặc trong một tập tin riêng biệt.
3. Nó hoạt động ngay cả khi window.onload đã được thiết lập.

Một tut nhanh chóng. Đây là một cái gì đó đơn giản và tốt đẹp bằng cách sử dụng POWER của CSS ... nhưng khó khăn concieve (và chắc chắn không phải là tôi) để bắt đầu với. Thêm DropShadow, có thể là một mảnh bánh cho nhiều người trong chúng ta, bằng cách sử dụng một số công cụ chỉnh sửa hình ảnh như Photoshop và Fireworks.
Lý do tại sao, tôi đã lựa chọn hiệu ứng bóng đổ bằng cách sử dụng CSS, thường là trong khi tạo ra một thiết kế trang / html của một ứng dụng, yêu cầu giữ iterating. Những gì tôi có nghĩa là, một trang web hiện có với nhiều hình ảnh, giống như những hiển thị freinds danh sách hoặc thư viện hình ảnh, nó sẽ rất khó để tái xử lý toàn bộ tải trọng của hình ảnh đã được đã được dỡ xuống để thêm hoặc loại bỏ các bóng tối, cho rằng vấn đề.
Vì vậy, Nếu bạn đã làm được một chút suy nghĩ về phía trước trong khi tạo ra các HTMLS thêm các bộ phận phòng, hay thường tình hình là bạn có một logic vòng tạo ra các biểu tượng / hình thu nhỏ trong XSL, PHP. JAVA hoặc bất kỳ ngôn ngữ lập trình / kịch bản khác, bạn có thể thêm nó vào bất cứ lúc nào, sau đó chỉ là vấn đề của các hiển thị và ẩn các bóng tối bằng cách sử dụng tài sản hiển thị CSS, theo các khách hàng bao giờ thay đổi yêu cầu ... Tôi havn't làm điều này loại suy nghĩ về phía trước trước khi điều này ... nhưng ahev bắt đầu ngay bây giờ!

Trong ví dụ dưới đây, hình ảnh ban đầu là bóng tối miễn phí và dropshadows được áp dụng theo yêu cầu! CŨNG, tôi đã đi thêm một chút, bằng cách sử dụng các thủ đoạn của Tut trước đây của tôi (Well! này có thể là ngắn nhất của Hướng dẫn khác nhau, do đó, nó chỉ hợp lý gọi họ là "Tut" 's) Sử dụng tài sản Clip CSS cho hiện chỉ

Hình ảnh Gốc

CSS DropShadow Kết quả

Demo | Tải về sourcefiles

Tại sao tôi muốn hiểu được điều này? ... Humm!!

Hầu hết các nhà văn CSS sẽ đồng ý rằng CSS Clip tài sản có lẽ là một trong những tài sản chưa được sử dụng hầu hết CSS. Đó là thực sự cho tôi và hạnh phúc nhất để bỏ qua nó, cho đến khi tôi bắt đầu sửa đổi Knob trượt các phần MooTools HAI (Pin) (với Dải Chỉ số) .

Có một gợi ý tốt từ một trong những người sử dụng thành phần để sửa đổi phần trượt bằng cách sử dụng cắt bớt hình ảnh backgroud (chống lại một bộ phận biến chiều rộng) để chỉ ra phạm vi thanh trượt. Như vậy đến thời gian của tôi để vui vẻ, nhưng un-điều lệ (đối với tôi ofcourse) vùng biển của tài sản Clip CSS.

Vâng! nó có thể được khó khăn như thế nào? Không có nhiều ở tất cả các ... YES và NO. Cú pháp để sử dụng tài sản Clip CSS là khá ngay thẳng, nhưng ý nghĩa / usuage là một chút croocked. Với một bộ nhớ của tôi như thế, mọi lúc tôi ngồi để làm lại trên Script trượt của tôi ... Tôi có tokeep đề cập trở lại để sử dụng tài sản CLIP này, để nhắc nhở bản thân mình logic mà tôi đã tạo ra trong kịch bản của tôi .... Do đó! cho bút xuống, với một hy vọng để ghi nhớ nó trong tương lai (và cũng vì lợi ích của những người có vẻ boggled Sở hữu Clip CSS)

CSS Clip làm gì?

Clip là một phần của mô-đun hiệu ứng hình ảnh của CSS 2.1. Đơn giản chỉ cần đặt, công việc của nó là để đặt một cửa sổ có thể nhìn thấy trên đầu trang của một đối tượng đang bị cắt bớt, do đó cắt hình ảnh và tạo hình thu nhỏ mà không cần phải tạo ra các tập tin bổ sung (tôi đã đặt tính năng này để sử dụng tốt hơn trong phần trượt )

Sử dụng tài sản Clip CSS, bạn có thể tạo ra một clipping bằng cách sử dụng hình dạng rect. Giống như nhiều thuộc tính CSS khác (như lợi nhuận đệm, ...), sử dụng rect yêu cầu bốn tọa độ Top, Right, Bottom, Left (TRBL). Bản chất croocked của tài sản này phản ánh khi bạn xem xét kỹ hơn ở đoạn tính toán khu vực cắt, bằng cách sử dụng các tọa độ (gửi não vào một quăng trong một thời gian). Bây giờ để gây nhầm lẫn bạn phía dưới bắt đầu từ phía trên, và phải bắt đầu từ bên trái. . Bạn thấy những gì tôi nói? .... Do đó này bài ...

Sự nhầm lẫn chút này có thể dễ dàng biến mất, với điều này giải thích hình ảnh của tài sản Clip / rect CSS như dưới đây!!!

CSS Clip Yêu cầu

Nhiệm vụ chúng tôi đã bắt đầu là clip hình ảnh Hình thu nhỏ sau đây thành một hình ảnh squarer tìm kiếm (và cũng là một hình ảnh góc rộng)

Thumbnal / Hình ảnh ban đầu	Clip Yêu cầu đối với sqaure Thumbmail

CSS Clip Kết quả

Demo | Tải về sourcefiles

Đôi khi để giữ pageweight xuống ... chúng tôi đã chia kịch bản của chúng tôi vào các mảnh vỡ ... Những mảnh javascript có thể được tải và khi có yêu cầu (trên một sự kiện hoặc bấm vào một liên kết hoặc nút ...).

Các Javascripts tải động là đơn giản và khá thẳng về phía trước như sau ...

= “text/javascript” > <Script type = "text / javascript">
chức năng loadNewScript (source) {
var s = document.createElement ('kịch bản');
s.setAttribute ('loại', 'text / javascript');
s.setAttribute ('src', source);
document.body.appendChild (s);
}
</ Script>

và bạn có thể có cuộc gọi sau đây bất cứ nơi nào trong cơ thể, hoặc bạn có thể có kịch bản này "onload" của các tài liệu riêng của mình ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js);"> Script tải năng động </ a>

hoặc

<body onload="loadNewScript('myDynamicScript.js');">

Nếu bạn là người css, bạn sẽ biết nỗi đau trong việc bố trí của bạn làm việc qua trình duyệt. IE8 là một cờ lê trong các công trình cho các nhà phát triển chúng tôi. Anywaz! nếu bạn nhấn khi vấn đề này, giống như tôi đã làm ngày hôm qua, hoàn toàn làm việc của bạn CSS trong IE7 (và trước đó) và Firefox đã đột nhiên bắt đầu ném cơn giận dữ trong IE8, TRY này ... Nó độc đáo dường như để sửa chữa vấn đề của tôi cho thời điểm này ....

Sử dụng kê khai Meta, chúng ta có thể chỉ định các công cụ vẽ, chúng tôi muốn IE8 để sử dụng. Vì vậy, để buộc IE8 để render như IE7 ... Chèn Tag Meta sau đây vào đầu tài liệu của bạn:

<meta http-equiv="X-UA-Compatible" content="IE=7"

Theo mặc định IE Meta sẽ là: -

<meta http-equiv="X-UA-Compatible" content="IE=8"
mà sẽ làm cho IE8 làm cho trang bằng cách sử dụng chế độ tiêu chuẩn mới.

Nếu cần thiết, cú pháp này có thể được sử dụng để chứa các trình duyệt khác như dưới đây:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4"

Giới DOCTYPES:

NẾU bạn không quen thuộc với các loại động vật được gọi là "DOCTYPE" ... đây là một số nhanh chóng đọc
DOCTYPES là gì? Quirks BROWSER chế độ nghiêm ngặt là gì?
Thiết lập các DOCTYPE trong XSL

Đối với một hiểu biết sâu sắc về DOCTYPES, hãy thử truy cập vào những liên kết này ...
Một Danh sách Ngoài: Sửa chữa trang web của bạn với DOCTYPE Right!
Danh sách Ngoài: Ngoài DOCTYPE: Tiêu chuẩn Web, tương thích Chuyển tiếp, và IE8

Lưu ý: Mặc dù nhiều người trong chúng ta HTML / CSS người đã bỏ qua tầm quan trọng của decleration DOCTYPE trong các tài liệu của chúng tôi, Thiết lập các DOCTYPE phải, thường là câu trả lời cho các vấn đề trình duyệt qua.

Với một loạt các Carousels ra khỏi đó, nhiều người cho Mootools là tốt, tôi vẫn quyết định viết Lớp Carousel của riêng tôi, đối với một số lý do tốt
1. Muốn một tính năng phân trang (có thể nhảy một slide đặc biệt / bước trong carousel).
2. Wanted tự do với vị trí của các nút LEFT, RIGHT / liên kết, nơi đã bao giờ tôi vui lòng.
3. Kiểm soát các bước trượt.

Tôi đã quản lý để tạo ra một Carousel mới, với các tính năng trên ... như dưới đây ... Hãy đề nghị bất kỳ sửa đổi bạn sẽ yêu cầu!!!

Ví dụ của tôi trông như thế này ... [ Xem Demo ]

Xem Demo | Tải về Mootools Carousel Với 1,0 Phiên bản Paging (tải về 1.992 lần)

1. Carousel Paging

Bạn có thể dễ dàng thêm các phân trang carousel của bạn, chỉ đơn giản bằng cách thiết lập lá cờ phân trang, mà là mới parater trôi qua trong khi tạo thể hiện của các MooCarousel đúng sự thật (muốn phân trang) hoặc sai (donot muốn phân trang).

carousel1 var = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright, c_ns, c_sss, true); / / ns = số ảnh, sss = trượt kích thước bước

Và ofcourse bạn có thể thay đổi giao diện-n-cảm nhận của những achors phân trang như bạn vui lòng bằng cách thay đổi CSS của họ.

Carousel_paging {text-align: right; margin: 5px 10px 0 0;}.
Carousel_paging hiện tại, trang carousel_paging {outline: none; chiều rộng:.. 15px; chiều cao: 15px; line-height: 15px; text-align: center; màn hình hiển thị: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

Carousel_paging 1: hover, carousel_paging hiện tại {background: # 4D4D9B; color: # ffffff;}.

Vâng! có một vấn đề nhỏ, mặc dù neo phân trang nếu đặt, sau đó nó sẽ được tạo ra luôn luôn sau khi các thành phần Carousel. Tôi muốn làm cho nó năng động, nhưng sau đó chỉ để giữ cho các Script thổi ra tỷ lệ, tôi quyết định bỏ qua nó.
Nhưng bạn biết Javascript, bạn có thể dễ dàng thay đổi mã thế hệ phân trang trong lớp MooCarousel để làm hài lòng nhu cầu của bạn.

2. Customising các biểu tượng phải & trái

Bạn có thể thay đổi ĐẶT, HÌNH ẢNH hoặc bất kỳ tài sản displat của các nút trái và bên phải chỉ đơn giản bằng cách chơi xung quanh với CSS. để có thể thay đổi vị trí của các buttoms trái và bên phải là lý do thực sự cho tôi để phải Lớp Carousel của chúng tôi.
Kể từ khi lớp MooCarousel này, chấp nhận id của các nút này, bạn thực sự có thể đặt các nút này bất cứ nơi nào trên trang web, nếu bạn xin vui lòng ... nó không phải là trong hệ thống phân cấp yếu tố, như trong ví dụ của tôi.

var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright, c_ns, c_sss, true);

CSS
Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; vị trí: tương đối; width: 23px; chiều cao: 20px; float: left; con trỏ: con trỏ;}

Carousel_container_r {background-position: 0-38px;}.

Carousel_container_l {vị trí: 0-58px;}.

3. Customising bước trượt

TÔI CÓ NGHĨA LÀ BƯỚC SLIDE CUSTOMISING CỦA TÔI?
Hầu hết Carousels trượt đầy đủ với các cửa sổ có thể nhìn thấy. Vì vậy, nói rằng bạn đã có bốn mục (như trong mẫu của tôi ở trên), nó sẽ trượt tất cả bốn mục. Với phần Carousel, vượt qua số lượng các slide và kích thước các bước của sự lựa chọn của bạn.

var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright, c_ns, c_sss, true);
c_ns = số của slide, c_sss = trượt kích thước bước

Ngoài ra, trong example1 của tôi, tôi đã calcuted kích thước bước trượt, dựa trên luận lý mà, tôi biết số hạng mục, chiều rộng trên mỗi mục và biên độ đã được đưa ra sau khi mỗi mục trong CSS của tôi.

/ * Đối với tiệc tùng 1 * /

var c1_w = 92; / / tiệc tùng khoản Rộng

var c1_n = 10; / / Tổng số khoản uống rượu say So sánh

var c1_pp = 4 / / Số perpage So sánh mục uống rượu say

var c1_marginFactor = 51;

var c1_sss = c1_w c1_pp; / / sss = slide kích thước bước

Các var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = số slide

c1_sss + = c1_marginFactor; / / sss = trượt bước kích thước, 51 cho lợi nhuận

Yêu cầu: Mootools 1,2

Xem Demo | Tải về Mootools Carousel Với 1,0 Phiên bản Paging (tải về 1.992 lần)