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

Сегодня мы сделаем простое решение данной задачи. Используя jQuery, PHP и класс PHPMailer форма посылает предложение пользователя прямо в ваш почтовый ящик.

HTML

Начнем с разметки HTML. Стили включаются вверху документа, а файлы JavaScript - внизу. Таким образом оптимизируется процесс загрузки страницы, так скрипты грузятся последними, позволяя пользователю увидеть содержание страницы.

demo.html

Форма обратной связи с использованием PHP и jQuery | Демонстрация для сайта сайт Обратная связь

Пожалуйста, включите контактную информацию, если вы хотите получить ответ.

Отправить

Внутри body находится div #feedback . Он размещен внизу справа в окне с помощью фиксированного позиционирования, что будет видно в разделе урока, посвященного CSS.

Внутри данного div размещаются пять цветных элементов span . Каждый из них имеет 20% ширины и смещается влево. Таким образом, они размещаются точно на по всей ширине div #feedback .

Затем следует контейнер .section, который содержит заголовок, область текста и кнопку.

CSS

Перейдем к заданию стилей для формы. Для начала скажем несколько слов о том, из чего состоит структура таблицы стилей. Если взглянуть на определения CSS, представленные ниже, то можно заметить что каждое правило начинается с #feedback . Таким образом организуется подобие пространства имен в CSS, что облегчает добавление кода к существующему веб-сайту без конфликтов.

styles.css - Часть 1

#feedback{ background-color:#9db09f; width:310px; height:330px; position:fixed; bottom:0; right:120px; margin-bottom:-270px; z-index:10000; } #feedback .section{ background:url("img/bg.png") repeat-x top left; border:1px solid #808f81; border-bottom:none; padding:10px 25px 25px; } #feedback .color{ float:left; height:4px; width:20%; overflow:hidden; } #feedback .color-1{ background-color:#d3b112;} #feedback .color-2{ background-color:#12b6d3;} #feedback .color-3{ background-color:#8fd317;} #feedback .color-4{ background-color:#ca57df;} #feedback .color-5{ background-color:#8ecbe7;} #feedback h6{ background:url("img/feedback.png") no-repeat; height:38px; margin:5px 0 12px; text-indent:-99999px; cursor:pointer; } #feedback textarea{ background-color:#fff; border:none; color:#666666; font:13px "Lucida Sans",Arial,sans-serif; height:100px; padding:10px; width:236px; resize:none; outline:none; overflow:auto; -moz-box-shadow:4px 4px 0 #8a9b8c; -webkit-box-shadow:4px 4px 0 #8a9b8c; box-shadow:4px 4px 0 #8a9b8c; }

Первый элемент, для которого задается стиль - это div #feedback . Ему назначается фиксированная позиция и привязка к окну браузера. После него идет определение для div .section и пяти цветных элементов span . Данные элементы отличаются только цветом фона, который назначается отдельно для каждого класса.

В самом низу представленной части CSS файла определяются правила для вывода области текста.

styles.css - Часть 2

#feedback a.submit{ background:url("img/submit.png") no-repeat; border:none; display:block; height:34px; margin:20px auto 0; text-decoration:none; text-indent:-99999px; width:91px; } #feedback a.submit:hover{ background-position:left bottom; } #feedback a.submit.working{ background-position:top right !important; cursor:default; } #feedback .message{ font-family:Corbel,Arial,sans-serif; color:#5a665b; text-shadow:1px 1px 0 #b3c2b5; margin-bottom:20px; } #feedback .arrow{ background:url("img/arrows.png") no-repeat; float:right; width:23px; height:18px; position:relative; top:10px; } #feedback .arrow.down{ background-position:left top;} #feedback h6:hover .down{ background-position:left bottom;} #feedback .arrow.up{ background-position:right top;} #feedback h6:hover .up{ background-position:right bottom;} #feedback .response{ font-size:21px; margin-top:70px; text-align:center; text-shadow:2px 2px 0 #889889; color:#FCFCFC; display:block; }

Во второй части таблицы стилей определяется вид кнопки отправки. Отметим, что существует три состояния кнопки, изображения для которых содержатся в одном файле для фонового рисунка - submit.png . Они выводятся только когда необходимо.

jQuery

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

script.js - Часть 1

$(document).ready(function(){ // Относительный URL скрипта submit.php. // Вероятно, вам нужно будет его поменять. var submitURL = "submit.php"; // Кэшируем объект feedback: var feedback = $("#feedback"); $("#feedback h6").click(function(){ // Значения свойств анимации хранятся // в отдельном объекте: var anim = { mb: 0, // Поле снизу pt: 25 // Отступ сверху }; var el = $(this).find(".arrow"); if(el.hasClass("down")){ anim = { mb: -270, pt: 10 }; } // Первая анимация перемещает вверх или вниз форму, а вторая перемещает // заголовок, так что он выравнивается по минимизированной версии feedback.stop().animate({marginBottom: anim.mb}); feedback.find(".section").stop().animate({paddingTop:anim.pt},function(){ el.toggleClass("down up"); }); });

Для того, чтобы код был простым и понятным, вверху создается объект anim , который содержит значения для анимации, и размещается оператор if . В зависимости ото существования класса ‘down ‘ на стрелке, мы разворачиваем или сворачиваем форму.

Вторая часть script.js обрабатывает работу с AJAX с submit.php .

script.js - Часть 2

$("#feedback a.submit").live("click",function(){ var button = $(this); var textarea = feedback.find("textarea"); // Мы используем класс working не только для задания стилей для кнопки отправки данных, // но и как своеобразный замок для предотвращения множественных генераций формы. if(button.hasClass("working") || textarea.val().length < 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // Данная операция помогает пользователю определить ошибку: if(xhr.status == 404){ text = "Путь к скрипту submit.php неверный."; } // Прячем кнопку и область текста, после которой // мы показывали полученный ответ из submit.php button.fadeOut(); textarea.fadeOut(function(){ var span = $("",{ className: "response", html: text }) .hide() .appendTo(feedback.find(".section")) .show(); }).val(""); } }); return false; }); });

Мы используем метод jQuery для AJAX $.ajax() для взаимодействия с submit.php . Данный метод дает немного больше контроля над соединением, чем $.get() и $.post() .

Одним из преимуществ метода является видимость свойств объекта во "всей" возвратной функции. Здесь мы проверяем статус ответа на соответствие ошибке 404 (не найдена страница) , и выводим сообщение пользователю с просьбой проверить путь submitURL .

Теперь пора перейти к завершающей части - PHP.

PHP

PHP обрабатывает данные, переданные с AJAX, проверяет их и посылает e-mail сообщение по заданному адресу.

submit.php

// Здесь нужно ввести свой адрес $emailAddress = "[email protected]"; // Используем сессию, чтобы предотвратить флудинг: session_name("quickFeedback"); session_start(); // Если последняя форма была отправлена меньше 10 секунд назад, // или пользователь уже послал 10 сообщений за последний час if($_SESSION["lastSubmit"] && (time() - $_SESSION["lastSubmit"] < 10 || $_SESSION["submitsLastHour"] > 10)){ die("Пожалуста, подождите несколько минут, прежде чем отправить сообщение снова."); } $_SESSION["lastSubmit"] = time(); $_SESSION["submitsLastHour"]++; require "phpmailer/class.phpmailer.php"; if(ini_get("magic_quotes_gpc")){ $_POST["message"] = stripslashes($_POST["message"]); } if(mb_strlen($_POST["message"],"utf-8") < 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail(); // Добавляем адрес получателя $mail->AddAddress($emailAddress); $mail->Subject = "Новое письмо из формы обратной связи"; $mail->MsgHTML($msg); $mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "Форма обратной связи на демо странице"); $mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "Форма обратной связи на демо странице"); $mail->Send(); echo "Спасибо!";

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

E-mail отправляется с помощью класса PHPMailer . Внимание! Он работает только с PHP5.

Несколько методов PHPMailer используется для конфигурации исходящего e-mail. Метод IsMail() указывает классу использовать внутреннюю функцию PHP mail() . Метод AddAddress() добавляет адрес получателя (вы можете добавить более одного получателя с помощью дополнительных вызовов данного метода). После добавления темы письма и текста указывается адрес для ответов и производится отправка сообщения.

Готово!

Заключение

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

Привет, Друзья! Хочу представить вашему вниманию универсальный скрипт отправки данных из форм на email . Скрипт идеально подойдет для сайтов типа Landing Page , сайтов визиток и т.д. Наш скрипт Формы обратной связи выделяется среди массы остальных скриптов в интернете тем, что имеет возможность подключения неограниченного количества форм с разными полями на одной странице и способен отправлять письма нескольким получателям .

Итак. Давайте приступим. Начнем пожалуй с возможностей скрипта.

  • Подключение неограниченного количества форм на одной странице.
  • Проверка правильности заполнения полей.
  • Настройка уведомлений.
  • Возможность использования писем для каждой формы.
  • Тип письма - (если используются html теги)
  • Отправка на неограниченное количество адресов.
  • Индивидуальная настройка каждой формы.
  • Скрипт работает на , без перезагрузки страницы.
  • Защита от спам ботов.
    • Первоначальная настройка.
    Скрипт работает на основе библиотеки , поэтому первое что нам необходимо сделать это подключить ее. Для этого рекомендую воспользоваться Google Hosted Libraries.

    О остальных файлах давайте подробнее:

    feedback.js - основной файл скрипта, отвечает за AJAX отправку формы .
    jquery.arcticmodal.js,
    jquery.arcticmodal. - обеспечивают возможность вывода форм в модальном окне.
    jquery.jgrowl.js,
    jquery.jgrowl.css - позволяют выводить уведомления на странице (блоки в верхнем углу страницы).

    HTML и обязательные атрибуты.
    Обязательным атрибутом для всех элементов формы является атрибут name="" - необходим для последующей настройки формы.
    Для кнопки (type=«button») обязательно нужно указать class=«feedback» . Так же хочу обратить ваше внимание на то, что в качестве кнопки может выступать любой html тег с классом «feedback».Вызов формы в модальном окнеДля вызова формы в модальном окне сперва нужно определить действие по нажатию на какой либо тег, например div с классом modal_btn
    Вызов формы в модальном окне $(document).ready(function() { $(document).on("click", ".modal_btn", function(){ $("#small-modal").arcticmodal(); }); });
    Так как форма должна быть видна только в модальном окне ее нужно скрыть, поместив в div с атрибутом style=«display: none;», а также для стилизации модального окна обернуть в парочку стандартных дивов.
    x

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

    Пример настроек для одной формыНастройки всех форм хранятся в файле feedback\index.php
    $form["form-1"] = array("fields" => array("name" => array("title" => "Имя", "validate" => array("preg" => "%%", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "Поле [ %1$s ] возможно содержит ошибку", "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s", "maxlength" => "Максимальная длинна поля [ %1$s ] превышает допустимую - %2$s",)), "tell" => array("title" => "Телефон", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{5,10}$/", "minlength" => "5",), "messages" => array("preg" => "Поле [ %1$s ] возможно содержит ошибку", "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s",)),), "cfg" => array("charset" => "utf-8", "subject" => "Тема письма", "title" => "Заголовок в теле письма", "ajax" => true, "validate" => true, "from_email" => "[email protected]", "from_name" => "noreply", "to_email" => "[email protected], [email protected]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77", "antispamjs" => "address77", "okay" => "Сообщение отправлено - OK", "fuck" => "Сообщение отправлено - ERROR", "spam" => "Cпам робот", "notify" => "color-modal-textbox", "usepresuf" => false)); // Следующая форма $form["form-2"] = array("fields" => array(.....
    Для добавления настроек новой формы, нужно по примеру массива $form["form-1"] создать новый массив $form[""]

    Помните я говорил о обязательном атрибуте name="" ?

    Обязательным атрибутом для всех элементов формы является атрибут name="" - необходим для последующей настройки формы.
    Так вот пришло время рассказать для чего же он все таки нужен.
    name="" - это буквенно-цифровой ключ для массива, должен быть уникальным для массива $form[""]

    Пример html кода для наглядности

    Теперь давайте разберемся с массивами и для чего они нужны.

    $form["form-1"] = array();
    $form["form-2"] = array(); и т.д.
    Это основные массивы для каждой новой формы, содержат в себе:

  • "fields" => array(); - Массив настроек элементов формы.
    • "name" => array(); - Массив настроек элемента формы (например input name=«name» type=«text» ) который имеет ряд настроек.
      • "title" => "Ваше имя" - название элемента формы, будет выводится при ошибках или в шаблоне
      • "validate" => array(); - массив, содержит правила валидации элемента формы
      • "messages" => array(); - массив, содержит сообщения валидации, а именно:
        • "preg" => "Элемент формы не соответствует регулярному выражению"
        • "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s" - ошибка валидации, ключ(preg) не соответствие ключу валидации
        • "maxlength" => "Максимальная длинна поля [ %1$s ] превышает допустимую - %2$s" - ошибка валидации, ключ(preg) не соответствие ключу валидации
  • "cfg" => array(); - Массив настроек формы.
    • "charset" => "utf-8" - кодировка
    • "subject" => "Тема письма", - Тема письма
    • "title" => "Заголовок в теле письма", - Заголовок в теле письма
    • "ajax" => true, - это аякс форма TODO (если не нужно, поставить - false)
    • "validate" => true, - (true) если хотим валидацию формы на сервере, заменяет js валидацию при "ajax" => true. Когда выкл(false) то можно не задавать настройки validate полей. TODO
    • "from_email" => "myemail", - отправитель, указать имя поля(name=«myemail»), а если не нужно email от пользователя, тогда заглушку [email protected]
    • "from_name" => "myname", - отправитель, указать имя поля(name=«myname»), а если не нужно имени пользователя, тогда заглушку No-reply
    • "to_email" => "[email protected]", - email получателя. Для отправки на несколько адресов перечислить их через запятую. Пример ("to_email" => "[email protected], [email protected], [email protected]",)
    • "to_name" => "noreply1", - Имя получателя. При отправке на несколько адресов через запятую перечислить имена получателей. Пример ("to_name" => "noreply1, noreply2, noreply3",)
    • "geoip" => true, - узнать местоположение по типу TODO
    • "referer" => false, - добавлять URL страницы с которой была отправлена форма
    • "type" => "plain", - тип письма - plain, html (если используются html теги)
    • "tpl" => false, - использовать шаблон письма. Если true, то будет подключен файл шаблона, в соответствии с именем формы (name=«form-1»), из папки и обработан файл (feedback/tpl/form-1.tpl), в противном случае будет отправлено все как есть, каждое поле с новой строки
    • "antispam" => "email77", - Анти спам, метод основан на скрытом (display:none) поле, которое автоматом заполняет только робот, тем самым выдает себя.
    • "antispamjs" => "address77", - Анти спам, метод основан на скрытом (display:none) поле, изначально заполненное, которое автоматически очищает javascript при загрузке страницы, даже умный робот не может это предвидеть, и тогда он блокируется.
    • "okay" => "Сообщение пользователю", - Сообщение пользователю, выводится при условии успешно отправленной формы, можно использовать html теги.
    • "fuck" => "Сообщение пользователю", - Сообщение пользователю, выводится при возникновении ошибки отправки формы, можно использовать html теги.
    • "spam" => "Сообщение пользователю", - Сообщение пользователю, выводится при подозрении на спам робот, можно использовать html теги.
    • "notify" => "color-modal", - какой тип уведомлений показывать, textbox - блоки в верхнем углу страницы, color - цветная подсветка в форме, modal - модальное окно в центре страницы, none - отключить. Можно совмещать, пример: color-modal - ошибки заполнения подсветкой полей, а текстовый статус отправки в модальном окне TODO
    • "usepresuf" => false - Используется ли кастомное добавление к теме либо к заголовку письма, на случай не большого изменения можно указать например %%cfg.title.suffix%%, для этого в форме должно быть скрытое поле, подробнее, см. ф-цю presuf()
    • Настройка шаблонов писемИтак. давайте теперь разберемся с темизацией наших сообщений.
    Во-первых, для того, что-бы форма была отправлена в шаблоне, в настройках формы нужно включить использование файла шаблона - "tpl" => true ,
    Во-вторых, нужно создать файл шаблона с расширением *.tpl в папке (feedback/tpl/ ), в соответствии с именем формы (name=«form-1» ).

    Пример: (feedback/tpl/form-1.tpl )

    Заголовок в теле письма
    %%name.title%% %%name.value%%
    %%tell.title%% %%tell.value%%

    name , tell и т.д. - Это атрибуты (name="") полей которые заполняет пользователь.
    title - Название элемента формы, которое задается в массиве настроек элементов формы.
    value - Значение элемента формы.

    На сегодня пока все, но скрипт конечно же не идеален, так что комментарии и описания багов приветствуются и в следующих версиях будут исправлены.

    P.S. Скрипт разработан командой

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

    Именно поэтому я дам определение данному термину и подробно опишу, что это такое, объясню, почему возникает проблема разного отображения одного и того же сайта на html и css в и дам несколько полезных советов. Давайте начнем разбор полетов!

    Кроссбраузерность, покажи свое лицо!

    Все из вас знают английское название термина «кроссбраузерность»: cross-browser. В дословном переводе это означает: «работающий во всех браузерах». Вот по сути и была названа главная цель кроссбраузерности: способствовать идентичному отображению в любом существующем браузере.

    Это означает, что независимо от того, в каком ППО для просмотра вы откроете сервис, его стилевая разметка не должна измениться.

    Почему же все такие проблемные?

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

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

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

    Второй проблемой некорректного отображения объектов на страницах веб-сервисов могут стать браузерные стандартные значения. Так, в каждом продукте, будь то , Safari, или другие, для большинства свойств и атрибутов установлены некие значения по умолчанию. В качестве примера можно назвать разные отступы от края экрана для тега body.

    И к третьей проблеме можно отнести в некотором роде халатность самих разработчиков. Что я подразумеваю под этим? Всего лишь несоблюдение стандартизированных правил, которые были установлены специальной организацией W3C (официальный сайт расположен по ссылке https://www.w3.org).

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

    Рецепты для решения проблем с идентичностью отображения

    Познакомившись с основными «камнями преткновения» на пути к кроссбраузерности, вы, вероятно, задали себе вопрос: «А как же тогда сделать сайт, функционирующий во всех браузерах одинаково?». Чтобы ответить на этот вопрос, я решил перечислить базовые решения и полезные советы по порядку.


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

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

    С уважением, Роман Чуешов

    Прочитано: 106 раз

    Среди всего разнообразия существующих на данный момент браузеров таких как Opera, Safari, Internet Explorer, Google Chrome, Mozila Firefox и, конечно же браузер Амиго, который имеет способность самопроизвольно устанавливаться на компьютеры, стоит только посмотреть на ссылку. И у любого из браузеров имеется большое количество версий, выходящих одна за другой. Поэтому каждая новая версия каждого браузера имеет свои собственные особенности. И для корректной работы сайта в каждом из них необходимо использовать кроссбраузерную верстку .

    И когда верстается сайт , его надо тестировать на всех браузерах. Случае, когда этого не делается, то после сдачи сайта могут всплыть неприятные дефекты.

    Самым «веселым» из браузеров, конечно же является браузер Internet Explorer, хотя при всем при этом большинство пользователей до сих пор используют этот браузер. Так если сайт предварительно проверялся на Chrome, а потом его открывают в Explorer, и, о, ужас. Блоки перепутаны, кнопки меню наезжают друг на друга, картинки отображаются некорректно, в общем, полный хаос.

    Поэтому для того, чтобы пользователю было удобно работать с вашим сайтом через любой браузер, и не видел подобного ужаса проведение кроссбраузерной верстки обязательно для любого сайта. Исходя из всего что было написано выше, делаем вывод, что кроссбраузерная html и css верстка – это верстка сайта, нацеленная на создания сайт, отображаемого в каждом браузере одинаково корректно.

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

    Причины проблем с отображением сайта. Теперь давайте разберем, почему происходят такие неприятности с восприятием кода в разных браузерах.
  • Верстка не соответствует некоторым стандартам HTML.
  • /i>Постоянно обновляются и появляются новые библиотеки и правила CSS. Они прекрасно воспроизводятся обновленными версиями браузеров, но могут некорректно отображаться старыми версиями.
  • Internet Explorer . Самый странный браузер, который не понимает половину всех правил и поэтому постоянно придумываются новые хаки, чтобы обойти эти проблему IE.
  • Значение атрибутов по умолчанию . В каждом браузере это значение может быть разным. Атрибуты – это цвета элементов, шрифты, их размер. Все это должно быть описано в таблице стилей, в противном случае браузер будет самостоятельно проставлять значения, указанные во свех из них по умолчанию. Поэтому в каждом из них сайт будут отображаться по разному.
    • Чтобы это научится обходить эти проблемы, для начала, как ы уже выяснили необходима практика, а для облегчения начального этапа изучения кроссбраузерной верстки я подготовили для Вас несколько советов.

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

    Совет 2. Установите все популярные браузеры на свой рабочий компьютер, а также все версии браузера Internet Explorer. Так как установить сразу несколько версий на один компьютер без особых танцев с бубном непросто, то можно установить Internet Explorer Tester. Эта программа дает возможность проверять сайт сразу же на нескольких версиях браузера.

    Совет 3. Заранее выберите себе вариант верстки. Здесь есть два варианта. Первый – верстать сайт полностью подходящий под один единственный браузер, а потом исправлять проблемы в каждом следующем браузере. Вариант второй – проверять каждый элемент кода по мере его написания во всех браузерах. Выбирая первый вариант, Вы сможете избежать лишних проблем, переписывая код полностью. Но выбор всегда остается за Вами.

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

  • Для Chrome на сайте getfirebug.com
  • Для Opera на официальном сайте Opera
  • Для Mozila на сайте addons mozila
  • Для IE на оф. сайте Microsoft

    • Давайте сделаем вывод из всего вышеперечисленного. Кроссбраузерная верстка – это не страшно, а иногда и весело. В современном мире она очень важна, для того чтобы стать преуспевающим верстальщиком. Главное, чтобы освоить эту верстку, это опыт, большой опыт. Поэтому практиковаться Вам придется очень много. Пока Вы тренируетесь, пользуйтесь разными стратегиями, пробуйте разные методы и средства (например, использовать в своих работах готовые фреймовики, которые могут ускорить разработку сайта и с легкостью создавать адаптивные макеты сайтов). По истечению некоторого времени Вы сможете найти именно свою стратегию того, как сделать кроссбраузерную верстку, и написать сайт, отображаемый корректно во каждом из популярных браузеров.

    Изучайте кроссбраузерную верстку и спасибо за внимание.

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

    Если кратко, то «кроссбраузерность» подразумевает идентичное отображение и работоспособность проекта при просмотре в любом из наиболее распространенных веб-браузеров . Это, определенно, один из наиболее сложных и в то же время важных аспектов, которые необходимо учитывать в процессе проектирования сайта.

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

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

    Конечно, перспектива устанавливать сразу несколько браузеров и каждый раз заморачиваться с ними для тестирования внешнего вида разработанных страниц, вряд ли кому-либо понравиться. Поэтому, стоит обратить внимание на автоматизированные решения.

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

    Еще одним важным трендом, который пришел к нам из Запада и активно набирает обороты в Рунете, является адаптивный дизайн (верстка) или responsive design.

    С повсеместным распространением смартфонов и планшетов количество вопросов, которые предстоит решать веб-разработчику, значительно выросло. Достаточно ли создавать только версию сайта для настольных систем или нацеливаться и на другие платформы ? Ограничиться мобильной версией или разработать дополнительно и версию для планшетов? Как быть с устройствами высокого разрешения типа iPad с Retina Display? Решение всех перечисленных вопросов возможно за счет применения адаптивной верстки.

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

    Адаптивная верстка определяется подходом, который предполагает, что спроектированный разработчиками сайт должен реагировать на поведение пользователя и среду, в которой он используется, учитывая такие характеристики как разрешение и ориентация экрана, а также используемая платформа. Достигается это путем комбинации верстки, графики и CSS-стилей, что позволяет автоматически приспособить внешний вид сайта при переходе пользователя, например, с настольного компьютера на планшет. Иными словами, речь идет о технологии, позволяющей сайту автоматически реагировать на предпочтения пользователя . Это позволяет устранить необходимость в разработке отдельного решения под каждый новый гаджет, который выходит рынке.

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