Блог программиста

Сегодня я решил уделить внимание таким моментам , как проблемы при работе с CSS на кросс-браузерном уровне. CSS — определённо лучшая и самая популярная техника для веб-разработки , создания дизайна и.т.д. Однако , проблемы разных браузеров и отсутствие поддержки CSS3 — реальная проблема для вашего творческого потенциала , так как это вызывает большую трату времени и нервов.

В данной статье рассмотрены 8 более менее популярных проблем , с которыми сталкиваются разные веб-разработчики во всём мире , каждый день.

Прозрачный фон , используя jQuery

Кто не знает прозрачные фоны? По-моему многие пытаются использовать их в своих дизайнах и реализациях сайтов. Но благодаря тому , что долгие годы IE6 не может  нормально отображать png файлы , это было большой проблемой для всех веб дизайнеров. Несмотря на то , что существует множество методов — доступных для того , чтобы решить проблему этого дефекта IE6 , на мой взгляд этот действительно хороший , так как он даёт возможность делать любой элемент прозрачным , даже без использования png файлов на вашем сайте.

1. шаг

Для начала вам требуется добавить следующие 2 файла на вашу веб страницу:

http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js — это сама библиотека jQuery.
http://design-forge.ro/projects/opensource/transBG.jquery.plugin.js — это плагин для jQuery , который и даёт нам эффект прозрачности.

2. ШАГ

Второй шаг — это добавление кода , который отвечает за конкретные элементы в дереве DOM. Вы можете добавить его в шапку сайта , либо в отдельный «*.js» документ. Для того , чтобы конкретный объект стал прозрачным , вам требуется применить к нему функцию transBGdraw().

В данном случае вам надо знать азы работы с библиотекой jQuery , чтобы отобрать те элементы , которые вы хотите сделать прозрачными.

$("#id").transBGdraw();
$("#menu").transBGdraw();
$("#container").transBGdraw();
 
// !!!IMPORTANT!!!
// if you use tagnames or classes, make sure every object affected has a unique id.
$("div").each(function()
{ $(this).transBGdraw(); });
 
$("h6").each(function()
{ $(this).transBGdraw(); });
 
$(".class1").each(function()
{ $(this).transBGdraw(); });
 
$(".text").each(function()
{ $(this).transBGdraw(); });
 
$(".information").each(function()
{ $(this).transBGdraw(); });

Ну вот — с данным методом всё ! Так как сам часто работаю с jQuery , применяю данную методику регулярно , так как использовать громосткие коды , которые иногда идут в разрез с другими библиотеками и скриптами , очень не удобно. А в jQuery всё что вам надо , либо вместо стандартной функции обёртки $(селектор) использовать jQuery(селектор). Либо использовать специальную функцию — jQuery.noConflict().

Разные классы , для разных браузеров

В очередной раз не стоит напоминать о проблемах стилей в IE6 , одним из решений данной проблемы , является присваивание отдельных классов , для разных браузеров. Даже если IE ввел специальные тэги , чтобы включать стили только для IE — у разработчика должна быть возможность работать также и с другими браузерами.

Данное решение работает , только при использовании jQuery , так что убедитесь , что он у вас установлен. Далее , скопируйте следующий код в головную часть вашей страницы или в отдельный *.js файл.

jQuery.each(jQuery.browser,function(brow,bool) {
!!bool && jQuery(”html”).addClass(brow);
});

Возможные варианты для селектора браузера , таковы — .msie, .mozilla, .opera, .safari или.other . Вот пример CSS кода , как работать с данной реализацией:

.msie .example {
	background-color: red;
}
.mozilla {
	background-color: green;
}
.opera {
	background-color: cyan;
}
.safari {
	background-color: black;
}
.js  {
	border: 10px solid black;
}

Соответственно в зависимости от браузера вы увидите соответствующий этому браузеру цвет фона. Довольно удобное решение , но редко используется.

Колонки одинаковой высоты используя jQUery

Когда вы используете таблицы , все колонки имею одну — фиксированную высоту. В то время , когда начинались первые шаги веб-дизайна , все использовали таблицы , чтобы создавать дизайн для своих проектов — так что проблемы создания колонок одинаковой высоты не существовало. Но с приходом CSS данная проблема появилась и  стала существенной для многих разработчиков.

К счастью есть очень хорошее решение для данной задачи , которое облегчает вам работу в разы.

Данное решение работает на базе jQuery , так что вам требуется установить последнюю версию данной библиотеки. Далее скопируйте ниже расположенный код в отдельный файл и включите его в вашу веб страницу.

/*--------------------------------------------------------------------
 * JQuery Plugin: "EqualHeights"
 * by:	Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
 *
 * Copyright (c) 2008 Filament Group
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Description: Compares the heights or widths of the top-level children of a provided element
 		and sets their min-height to the tallest height (or width to widest width). Sets in em units
 		by default if pxToEm() method is available.
 * Dependencies: jQuery library, pxToEm method	(article:
		http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
 * Usage Example: $(element).equalHeights();
  		Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
 * Version: 2.0, 08.01.2008
--------------------------------------------------------------------*/
 
$.fn.equalHeights = function(px) {
	$(this).each(function(){
		var currentTallest = 0;
		$(this).children().each(function(i){
			if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
		});
		if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
		// for ie6, set height since min-height isn't supported
		if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
		$(this).children().css({'min-height': currentTallest});
	});
	return this;
};

Следующий шаг , вам требуется добавить код , который определит , какой элемент должен использовать данные параметры , если выражатся точней , то мы должны определить селектор к которому требуется применить выравнивание колонок.

$('.container').equalHeights();

Вот реальный пример применения данной реализации:

JavaScript

$(function(){ $('#equalize').equalHeights(); });

HTML

<div id="equalize" class="container">
		<div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
		<div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
		<div class="box"><p>C</p></div>
		<div class="box"><p>D - Ut enim ad minim</p></div>
</div>

Вот в общем то и всё. Об остальных примерах я расскажу в следующей части этой статьи.

Популярность: 77%

Можно также почитать:

• 10 JavaScript AJAX меню - табов для вас
• Заставляем IE5 и IE6 правильно понимать HTML/CSS/PNG
• Cheat sheets - листы подсказки для программистов
• Оптимизируем JAVASCRIPT Код
• Меню на Javascript с использованием слайдера