.: Wall Pearl :

Posts tagged with "IE"

Microsoft: IE is The Best

Friday, 19. June 2009, 15:33:39

Comparison, Microsoft, Browser, IE8 ...

Chưa đến 1/4 mà Microsoft đã đùa rồi

Còn may không so với Opera

11 comments

Đăng Nhập Cùng Lúc Nhiều Tài Khoản Trên Mọi Trang Web

Monday, 11. May 2009, 17:07:08

Tips, Incognito, Tutor, Profile ...

Trong cái thế giới mà việc định danh một người dựa trên các id, username như internet thì việc một người sở hữu một vài account trên một trang web là việc bình thường. Một người hoàn toàn có thể tạo ra vài mailbox, profile hay blog cá nhân trên một trang mạng. Tuy nhiên làm sao để có thể cùng lúc đăng nhập cùng lúc các tài khoản này để có thể cùng lúc check Gmail, cập nhật Twitter, nhảm sự trên blog? Có thể bạn sẽ sử dụng cùng lúc nhiều trình duyệt. Đó cũng là một giải pháp. Nhưng nếu bạn đang sử dụng IE8 hay Google Chrome thì việc này đã "được hỗ trợ". Nguyên lý ở đây là các trang web sử dụng cookie để giữ vết tình trạng đăng nhập của người dùng. Cho nên nếu trình duyệt có chế độ nào đó để lại truy xuất trang web đó với một cookie mới thì ta lại có thể login tiếp.

Đối với IE8

Multi-login với chức năng New Session của IE8

Trên IE8 có 2 tính năng mới đáng chú ý đó là Inprivate Browsing và New Session. Inprivate Browsing là một chế độ lướt web mà các dữ liệu trong quá trình lang thang net bao gồm các file tạm, cookie, history,... sẽ bị xóa khi tắt đi chế độ này (tính năng kiểu này rất thích hợp cho những tín đồ ma giáo đây). Do tính năng đặc dị này nên các thứ dữ liệu kể trên (bao gồm cookie) trong chế độ lướt web này sẽ được lưu trữ tách biệt so với chế độ bình thường. Do đó ta có thể lợi dụng tính năng này để cùng lúc đăng nhập vào một trang web với 2 account (1 ở chế độ lướt web thường và 1 trong chế độ private). Thử tí nhá. Bạn bật IE8 lên rồi đăng nhập vào My Opera (hoặc trên một trang mạng bất kỳ nào đó). Sau đó bấm Ctrl + Shift + P để bật Inprivate Browsing. Trong cửa sổ IE mới hiện ra, bạn thử đăng nhập My Opera với một username khác. Bây giờ thì bạn đã có thể cùng lúc sử dụng 2 account để spam rồi nhá. Một mẹo nhỏ là bạn có thể thêm vào thông số -private ở thuộc tính Target của shortcut IE8 để mở nhanh chế độ Private bằng shortcut.

Biện pháp ở trên chỉ có thể giúp bạn đăng nhập cùng lúc 2 account. Nhưng nếu bạn muốn đăng nhập cùng lúc với nhiều account hơn thì phải sử dụng một chức năng khác của IE8 là New Session. Với chức năng này bạn có thể mở nhiều cửa sổ session (phiên làm việc) để lướt web. Mỗi session riêng biệt này sử dụng cookie riêng của mình (không chia sẽ cookie) cho nên chúng ta có thể lợi dụng điều này để đăng nhập cùng lúc với nhiều account. Để mở một session mới bạn vào File > New Session (bấm phím Alt để mở menu bar ẩn). Hoặc một mẹo khác với shortcut là thêm -nomerge vào thuộc tính Target của shorcut IE8. Mỗi lần muốn mở session mới bạn chỉ cần dùng shorcut là được.

Lưu ý: Các cửa sổ và thẻ thuộc về session nào thì chia sẽ cookie với session đó, và đừng nhầm lẫn một session mới với một cửa sổ mới.

Đối với Google Chrome
Có vẻ như Microsoft và Google "tư tưởng lớn đụng nhau" cho nên với 2 tính năng kể trên của IE8 thì trong Google Chrome cũng có 2 tính năng tương tự nhưng cao cấp hơn. Do đó Pearl sẽ không bàn thêm nhiều nữa mà chỉ nói về những điểm khác biệt.

Đầu tiên là chế độ Incognito của Google với tính năng tương tự Inprivate Browsing. Bạn bấm tổ hợp phím Ctrl + Shift + N để bật chế độ này hay thêm -incognito vào thuộc tính Target của shortcut.

Multi-login với chế độ Incognito của Chrome

Tiếp theo là tính năng tạo Profile lướt web của Google. Đây là một tính năng giúp phân chia các thông tin lướt web theo profile. Giúp cho những thành viên dùng chung máy tính tránh khỏi các vấn đề nhạy cảm mà vẫn không cần dùng tính năng Incognito. Và vì vậy mà các dữ liệu phát sinh khi lướt web của mỗi profile cũng sẽ được lưu trong các folder riêng. Chính đều này nên ta có thể tạo ra nhiều profile để có thể tiến hành multi-login. Bạn vào Control (cái nút icon chìa khóa ấy) > New window in profile > New Profile. Bạn gõ vào tên profile muốn tạo. Có thể check vào Create a desktop shortcut để tạo shortcut khởi động nhanh Google Chrome với profile này > OK. Bây giờ bạn đã có thể đăng nhập vào My Opera (hoặc trang mạng bất kỳ) với nhiều account cho riêng mỗi một profile. Để mở một cửa sổ mới cho profile nào đó bạn vào Control > New window in profile > tên profile. Hay có thể bấm tương ứng tổ hợp phím Ctrl + Shift + profile id.

13 comments

Internet Explorer Collection - Bộ Sưu Tập Đồ Cổ Cho IE Fans

Tuesday, 5. May 2009, 16:01:38

Softwares, Browser, Web, Designer ...

Đúng như cái tên. Internet Explorer Collection là một gói cài đặt gồm các phiên bản IE từ 1.0 đến 8.0. Cho phép cài đặt nhiều phiên bản IE trên cùng một máy. Đặc biệt hữu dụng đối với các web designer trong việc test và debug (chỉ nên sử dụng từ IE6 trở lên). Hay cũng có thể làm nguồn tư liệu cho những IE-addicted ngâm cứu IE qua các thời kỳ. Hay cho bác Bill để dành làm kỷ niệm

Một số tính năng
+ Chương trình không gây ảnh hưởng tới phiên bản IE hiện có trên máy.
+ Có thể chạy cùng lúc nhiều phiên bản IE.
+ Bao gồm Internet Explorer Developer Toolbar 1.00.2188.0

Khả năng tương thích

WallPearl's Blog vẫn hiển thị tốt trên IE 5.5

Download (54.5M)

Ngoài ra, những ai quan tâm tới trình duyệt có thể ngâm cứu thêm ở đây.

15 comments

Hiển Thị Ảnh PNG Trong Suốt Trên IE 5.5+ (Tập 2)

Sunday, 3. May 2009, 15:09:16

HTC, Transparent, Tutor, PNG ...

Lần trước Pearl đã có một bài giới thiệu về cách fix lỗi hiển thị ảnh PNG trong suốt cho IE 5.5+. Tuy nhiên, cách thức tương đối dài dòng, khó sử dụng và có một lỗi nho nhỏ mà trong bài viết lần trước Pearl đã chưa kịp giới thiệu (tại chưa thấy phát sinh

). Trong bài viết lần này Pearl sẽ giới thiệu với mọi người một cách thức đơn giản hơn để có thể làm công việc này đồng thời đền bù thêm cách thức fix cái lỗi nho nhỏ kia luôn thể.

Về phương thức thì bài viết lần này hoàn toàn giống với bài trước tức là sử dụng bộ lọc "AlphaImageLoader" để hỗ trợ IE5.5+ hiển thị được ảnh PNG trong suốt. Tuy nhiên không rắc rối như cách thức trực tiếp đã giới thiệu ở lần trước. Lần này chúng ta sẽ sử dụng một extension của IE là HTML Component (có định dạng *.HTC). HTML Component như tên gọi của nó chính là một thành phần HTML bao gồm stylesheet, script được đóng gói lại để có thể tham chiếu cho nhiều trang web. Giúp thuận tiện hơn trong việc xây dựng các ứng dụng web như sự quảng cáo của Microsoft (mặc dù W3C đã ignore công nghệ này của Microsoft). Và một điều thú vị là chúng ta có thể nhúng HTML Component vào trang web thông qua CSS với thuộc tính behavior.

Nhưng trước tiên chúng ta sẽ phải xây dựng một HTML Component để giúp hiển thị ảnh PNG trong suốt cái đã. Ý tưởng ở đây đó là chúng ta sẽ viết một script để nhận diện hình ảnh định dạng PNG trên trang web rồi sau đó chúng ta sẽ replace những ảnh PNG này bằng một ảnh trắng và đưa ảnh PNG vào bộ lọc AlphaImageLoader.

Ví dụ ban đầu trên trang web của bạn có một ảnh PNG như sau

<img src="WP-Logo.png" width="250" height="250">

Chúng ta sẽ viết một đoạn script để đọc trang web và nếu nó đọc thấy ảnh WP-Logo.png thì sẽ replace img tag như trên thành thế này

<img src="blank.gif" style="width: 250px; height: 250px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='WP-Logo.png', sizingMethod='scale')" />

Cơ chế là như vậy thôi nhưng nói thật Pearl cũng hem biết viết cũng hem có thời gian ngâm cứu cách viết mấy HTML Component này nên bạn nào có nhu cầu tìm hiểu sâu về vấn đề này thì có thể tham khảo tại đây.

Trong bài viết này Pearl sẽ chỉ giới thiệu về một HTML Component do TwinHelix xây dựng sẵn với các chức năng như sau:
+ Tự động hỗ trợ trong suốt cho tất cả ảnh PNG trên trang web (tất nhiên ảnh chỉ hỗ trợ ảnh PNG trong suốt) bao gồm ảnh định nghĩa trong thẻ img, ảnh nền CSS.
+ Hỗ trợ script chuyển src, class name của thành phần ảnh HTML.
+ Hỗ trợ CSS định vị, repeat cho ảnh (cần phải dùng thêm javascript).

Bây giờ bạn download file IE PNG Fix 1.0 từ TwinHelix về giải nén được file bank.gif và iepngfix.htc. Bạn upload 2 file này lên host của mình. Bây giờ bạn chỉ cần thêm thuộc tính behavior: url(iepngfix.htc) vào một selector nào đó trong CSS để áp dụng hiệu ứng cho selector đó. Ví dụ:

div, img, a, input { behavior: url (iepngfix.htc) }

Lưu ý: Url file htc dựa trên liên hệ của file htc với trang web muốn áp dụng hiệu ứng chứ không phải là với file CSS như trường hợp url của background. Ảnh blank.gif nên đặt cùng vị trí với file htc hoặc thay đổi url cho ảnh blank.gif trong file htc. Nếu trang web của bạn sử dụng quá nhiều ảnh PNG thì sẽ load lâu hơn.

Một lỗi nghiêm trọng khi sử dụng bộ lọc AlphaImageLoader đó là nếu như áp dụng bộ lọc này cho một thành phần A. Đồng thời thành phần A này được đặt CSS position là static, relative hay absolute. Trong thành phần A này lại chứa các thành phần link B. Hệ quả đó là các liên kết B bên trong thành phần A sẽ không thể click. Biện pháp khắc phục:

- Nếu thành phần A có position là static thì chúng ta sẽ thêm vào thành phần B thuộc tính CSS position:relative và z-index:1

- Nếu thành phần A có position là relative hay absolute thì phải thêm một innerwrap C trong thành phần A. Và chuyển hiệu ứng fix PNG từ A sang C. Rồi tiếp tục xử lý như cách trên. Tức là dùng C làm trung gian.

Nếu muốn sử dụng thuộc tính CSS position và repeat cho ảnh PNG trong suốt thì bạn phải sử dụng thêm javascript trong phiên bản IE PNG Fix 2.0 beta

Xem ví dụ minh họa cho IE PNG Fix 1.0 (non JS) và IE PNG Fix 2.0.

12 comments

Fix Min-/Max- CSS Attribute cho IE

Thursday, 19. February 2009, 15:19:28

Expression, Max, Tutor, Min ...

Mặc dù Pearl đã hitle bạn IE rồi. Nhưng một sự thật phủ phàng không chỉ Pearl mà cả thế giới net (đặc biệt là web dev) phải chấp nhận là IE vẫn còn quá phổ biến

. Do vậy mà dù sao đi nữa thì vẫn phải tìm cách bưng bít cho cái blog nó nên hồn 1 tí

. Và quả thật thì hầu hết các skin của Pearl đều hoạt động ổn trên IE. Chỉ còn một lỗi be bé mà Pearl phải bận tâm là lúc post các ảnh to hơn chiều rộng entry thì nó bị xén "overflow" đi (IE nó không hiểu mấy vụ min/max lắm). Nhưng mà cũng không bận tâm nhiều lắm vì Pearl có dùng IE lướt web bao h mà cái lỗi nó bé như que tăm ấy nhỉ

Nhân dịp lần này làm cái skin “Ai Bơ”, để “sáng tạo” hơn em Vista lần trước Pearl đã lôi cả cái footer lên chung sidebar chơi. Nhưng để duy trì cho cái sự chuyển đổi đó thì Pearl phải tìm hiểu cách fix lỗi min-height cho IE mà đã lỡ fix min-height rồi thì fix luôn max-width cho mấy cái ảnh nhỉ

. Mà cái vụ fix này cũng có khá nhiều cách nhá. Người thì cứ dùng CSS đơn thuần, người dùng filters, nhưng mà xem kỹ thì dùng expression vẫn là giống nhất

Expression là một thuộc tính CSS giúp thực hiện một vài tính toán Javascript đơn giản trong CSS. Và chỉ được hỗ trợ trên IE (hình như 5+) (Microsoft khoái tự đặt quy tắc của mình hơn là làm theo quy tắc của người khác nhỉ

). Ví dụ đoạn code sau sẽ định min-width là 500px cho thành phần #wrap

#wrap{width:expression(this.width < 500 ? "500px" : auto)}

Có thể diễn dịch đoạn code trên là nếu chiều rộng thành phần này nhỏ hơn 500px thì đưa nó về 500px, nếu không thì cho tự do.

#wrap{width:expression(this.width > 1000 ? "1000px" : this.width)}

Đoạn code trên sẽ quy định lại chiều rộng thành phần #wrap về 1000px nếu nó vượt quá 1000px, nếu không phải thì cứ dùng chiều rộng hiện có.

Chúng ta cũng có thể viết ngắn gọn như sau

#wrap{width:expression(this.width > 1000 ? "1000px" : this.width < 500 ? "500px" : this.width)}

Một cách tương tự chúng ta cũng có thể quy định min-height và max-height cho #wrap lần lượt là 800px và 2000px

#wrap{height:expression(this.scrollHeight < 800 ? "800px" : this.scrollHeight > 2000 ? "2000px" : this.scrollHeight)}

Do các trình duyệt khác không hiểu expression nên chúng ta có thể dùng chung nó và các thuộc tính CSS chuẩn bình thường. Tuy nhiên, khi duyệt các trang web có sử dụng thuộc tính này IE sẽ hiện một thông báo yêu cầu bạn cho phép chạy ActiveX. Và một phiền phức khác khi Pearl áp dụng expression để giải quyết vấn đề của mình là lần đầu truy cập thường kích thước ảnh trong các entry hiển thị thậm chí rất bé nhưng chỉ cần enter một lần nữa thì nó sẽ làm việc đúng thôi

(một lần nữa cho thấy sự tồi tệ của IE, đề nghị Microsoft sử dụng chuẩn web dùng cái).

Ngoài dùng expression thì còn một cách thường được dùng là

#wrap{
min-width:500px;
width:auto !important;
width:500px
}

=> Các trình duyệt Non-IE sẽ nhận 2 thuộc tính min-width:500px và width:auto !important. Riêng IE sẽ định width:500px và nếu width thực tế của #wrap lớn hơn 500px thì cho auto.

Tuy nhiên như các bạn thấy thì do đặc thù của cách này thì nó chỉ dùng để fix min-width/height thôi. Và lưu ý đừng dùng thêm thuộc tính overflow:hidden cho trường hợp này vì nó sẽ ẩn đi cái phần dôi ra do diện auto đấy

Tình hình là có khá nhiều người đang “tra vấn” Pearl về cái phiên bản Advanced của Simple CSS. Nhưng tiếc là do sự cố kỹ thuật + cá nhân mà Pearl vẫn chưa hoàn thành được. Hi vọng sẽ sớm hoàn tất và lúc đó Pearl sẽ có câu trả lời với mọi người. Còn bây h thì lâu lâu Pearl sẽ cố chèn vào một entry CSS để giảm nhiệt

Lưu ý: Riêng My Opera không hỗ trợ thuộc tính này nên nếu ai muốn dùng thì phải soạn trên một file CSS ngoại và nhúng vào CSS chính thông qua thuộc tính @import.

8 comments