Верстка для различных версий Internet Explorer

Saturday, 25 October 2008

С каждой новой версией браузера от Microsoft мир веб-разработчиков напрягается - чего они там еще нового придумали? Пользователи-новаторы радостно перескакивают на новые версии, пользователи-консерваторы довольствуются тем, что есть. Статистика используемых браузеров начинает колебаться, а за кулисами происходит настоящая борьба за приличный вид страниц. Потому что каждый новый Internet Explorer показывает один и тот же код страницы по разному, и не всегда так, чтобы можно было закрывать на это глаза. В браузерах, живущих "по понятиям" - то есть поддерживающих стандарты наиболее полным образом, "проблема обновления" практически отсутствует - их механизм отрисовки страницы изначально максимально соответствует стандартам и новая версия предлагает в первую очередь новые удобства пользования браузером, а не нововведения в плане отображения страницы. Так происходит с Mozilla Firefox, с Opera и многими другими браузерами. Страница, сверстанная по стандартам, отображается в них коректно. Отрадно, что недавно появившийся Google Chrome продолжает эту традицию и головных болей верстальщикам почти не добавил. Для браузеров, не придерживающихся стандартов (я в первую очередь имею в виду старый и недобрый IE), существует целый арсенал хаков, позволяющих обойти некорректное отображение кода сайта. Не буду их здесь перечислять - информацию по ним можно найти во многих местах в интернете. Одним из таких хаков является условное включение в страницу HTML-кода, действующего только для IE старых версий - 6й и ниже: <!--[if lte IE 6]>             <link rel="stylesheet" type="text/css" href="/css/ie6.css" media="screen" />             ..... <![endif]--> Это замечательное решение, которое используется массой людей, в том числе и мной. Однако существует ситуация, в которой оно не срабатывает: Если у вас, как и у многих добропорядочных верстальщиков, на рабочем компьютере основной версией IE, которая установлена в системе, является Internet Explorer 7, и для полного счастья установлен набор старых версий IE под названием Multiple IEs, то при попытке посмотреть страницу через IE 6 из этого набора описанный выше хак не сработает. Из-за того, что в проверке условия будет фигурировать основная (системная) версия Internet Explorer, то есть "семерка", а не та, которая указывается в User-Agent. Чтобы обойти это ограничение, в процессе отладки кода страницы для IE 6 и меньше придется ставить в код такое условие: <!--[if lte IE 7]> При этом необходимо помнить о том, что такую страницу не следует смотреть в IE 7 из-за того, что код будет срабатывать и для него После того, как код будет отлажен, возвращаем в условие шестерку, удостоверяемся в корректном отображении в IE 7 и остальных браузерах - и смело выкладываем код на сайт.

Как заставить Spaw закачивать файлы с русскими именами и не иметь проблем с кодировками?

С некоторых пор я использую в своих разработках очень хороший и функциональный WYSIWYG-редактор Spaw. Он требует минимум времени на настройку, но при этом поволяет множество замечательных функций. Пожалуй, самая ценная из которых - это возможность быстрой закачки изображений (и любых других файлов) на сайт для последующей вставки в редактируемый текст. И что особенно приятно, этот редактор прекрасно русифицирован.

Однако есть небольшой подводный камень, на который обязательно найдет коса разработчиков, которые используют этот редактор для русскоязычных сайтов, да еще и с кодировкой UTF-8. Конечно, кодировка прекрасно выставляется в настройках Spaw, и проблем с отображением, редактированием русских символов нет. Однако при закачке файла, названного русскими символами, Spaw проверяет лишь его расширение на соответствие разрешенным типам файлов, но само имя файла так и остается состоящим из русских символов. И очень вероятно, что нормально его скачать потом не удастся, хотя добавить в текст - пожалуйста.

В такой ситуации полезно просто транслитерировать имя закачиваемого файла, чтобы избежать проблем. Как это сделать? Легко:

открываем файл spaw/plugins/spawfm/class/spawfm.class.php

и добавляем в класс SpawFm следующую функцию:

function transliterateFilename($input, $mode=1)
{
$trans=array(
   ' ' => '_',
   'А' => 'A', 
   'Б' => 'B',
   'В' => 'V',
   'Г' => 'G',
   'Д' => 'D',
   'Е' => 'E',
   'Ё' => 'YO',
   'Ж' => 'ZH',
   'З' => 'Z',
   'И' => 'I',
   'Й' => 'J',
   'К' => 'K',
   'Л' => 'L',
   'М' => 'M',
   'Н' => 'N',
   'О' => 'O',
   'П' => 'P',
   'Р' => 'R',
   'С' => 'S',
   'Т' => 'T',
   'У' => 'U',
   'Ф' => 'F',
   'Х' => 'H',
   'Ц' => 'TS',
   'Ч' => 'CH',
   'Ш' => 'SH',
   'Щ' => 'SCH',
   'Ъ' => '',
   'Ы' => 'Y',
   'Ь' => '',
   'Э' => 'E',
   'Ю' => 'YU',
   'Я' => 'YA',
   'а' => 'a',
   'б' => 'b',
   'в' => 'v',
   'г' => 'g',
   'д' => 'd',
   'е' => 'e',
   'ё' => 'yo',
   'ж' => 'zh',
   'з' => 'z',
   'и' => 'i',
   'й' => 'j',
   'к' => 'k',
   'л' => 'l',
   'м' => 'm',
   'н' => 'n',
   'о' => 'o',
   'п' => 'p',
   'р' => 'r',
   'с' => 's',
   'т' => 't',
   'у' => 'u',
   'ф' => 'f',
   'х' => 'h',
   'ц' => 'ts',
   'ч' => 'ch',
   'ш' => 'sh',
   'щ' => 'sch',
   'ъ' => '',
   'ы' => 'y',
   'ь' => '',
   'э' => 'e',
   'ю' => 'yu',
   'я' => 'ya',
   '№' => 'No.',
   //ukranian symbols added
   'Ї' => 'I',
   'І' => 'I',
   'Є' => 'E',
   'ї' => 'i',
   'і' => 'i',
   'є' => 'e',
   );
$input=strtr($input, $trans);
if($mode==1) //lowercase mode
{
   return utf8_strtolower($input, 'utf-8');
}
return $input;
}

после чего находим строку

$uplfile_name = $uplfile['name'];

и заменяем ее на эти строки

$uplfile_name = $this->transliterateFilename($uplfile['name'],0);
$transliterated_name = $uplfile_name;

Нуль, передаваемый последним параметром, означает, что конверсия в нижний регистр не требуется. Если передать не ноль - имя файла будет преобразовано в нижний регистр. $translierated_name сохраняем для того, чтобы использовать для автоматического переименования файла, если такой файл уже существует на сервере.

Чтобы автопереименование использовало транслитерированный вариант, необходимо найти строку

$uplfile_name = ereg_replace('(.*)(\.[a-zA-Z]+)$', '\1_'.$i.'\2', $uplfile['name']);

и заменить ее на

$uplfile_name = ereg_replace('(.*)(\.[a-zA-Z]+)$', '\1_'.$i.'\2', $transliterated_name);

Естественно, в массив $trans можно передавать любые правила конверсии, которые вам будут угодны. Как нетрудно заметить в приведенном коде, лично я добавил, кроме транслитерации, перевод пробелов в символы подчеркивания, а также символы украинского алфавита, которых нет в русском. Так что украинские девелоперы также могут использовать этот код ;) 

Как это было у меня

С того самого времени, как я впервые увидел компьютер (это был старенький Atari 65 XE, а мне тогда было лет 11 или 12), меня не отпускала мысль о том, что я непременно свяжу свою деятельность с тем, что сейчас наназывают словом "IT". Для меня всегда было интересно заставлять машину решать задачи так, будто она умеет думать, как человек. Но с самого начала я знал, что для создания этой иллюзии прежде всего нужно хорошенько подумать программисту. Начиная с рисования незатейливых картинок на мониторе и "взламывания" файлов сохранения для компьютерных игр, я постепенно изучал все более и более сложные вещи, языки программирования, и в конце-концов оказался в той отрасли информационных технологий, которая относится к всемирной сети, т.е. к интернету. Я сменил немало занятий и параллельно ознакомился с самыми разнообразными технологиями. Сейчас, по прошествии нескольких лет серьезной работы в этой области я нисколько не жалею о том, какой путь себе выбрал. Впрочем, с возрастом ко мне пришло понимание того, что жалеть не стоит вообще ни о чем, что ты когда-либо делал и продолжаешь делать с искренним удовольствием.

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