6 новых методов, которые должен знать каждый веб-разработчик.

      CSS, HTML

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

Медиа запросы CSS3

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

Например, код ниже показывает, как применить определенный стиль, только если клиентский дисплей менее чем 767px.

1
2
3
4
5
6
7
8
9
10
@media screen and (max-width:767px){
  #container {
    width:320px;
  }
  header h1#logo a {
    width:320px;
    height:44px;
    background:url(image-small.jpg) no-repeat 0 0;
  }
}

Изменение размеров шрифта благодаря REM

CSS3 включает несколько новых единиц, включая единицу REM.

Em единица определяется относительно размера шрифта родителя, т.е. наследуется. К примеру, Вы определили для заголовка шрифт размером 2em, что соответствует 20px, а для текста ссылки находящейся в заголовке шрифт размером 1em (100% от размера шрифта родителя). Тогда текст заголовка будет одного размера (простой ли это текст или ссылка), однако если использовать rem единицу, то размер шрифта устанавливается для каждого элемента свой, наследование отменяется.

1
2
h4 { font-size:1.4em; }
h4 a { font-size:1em; }

Или:

1
2
h4 { font-size:1.4rem; }
h2 a { font-size:1.4rem; }

Cache страницы для офлайнового использования

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

Кэширование страниц осуществляется довольно легко. Первое, что нужно сделать, добавить следующий код к Вашему .htaccess файлу:

1
AddType text/cache-manifest .manifest

После следует создать файл offline.manifest, со следующими директивами:

1
2
3
4
5
CACHE MANIFEST
CACHE
index.html
style.css
image.jpg

И наконец, необходимо связать .manifest файл с html документом:

1
<html manifest="/offline.manifest">

Вот и все, теперь Ваша страница сохранится в памяти браузера клиента и будет доступна по адресу, даже если соединение с интернетом разорвано.

HTML5 drag & drop

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

Чтобы создать элемент draggable, Вы просто должны добавить это draggable = «true» атрибут, как показано в примере:

1
2
3
4
5
<div id="columns">
<div draggable="true"><header>A</header></div>
<div draggable="true"><header>B</header></div>
<div draggable="true"><header>C</header></div>
</div>

Конечно, после того, как Вы создали элемент draggable, Вы должны использовать JavaScript, чтобы осуществить эффект drag & drop. Я собираюсь объяснять это чуть позже, в одной из статей.

Подсказка: Если вы хотите,  предотвратить перетаскивание текстового содержимого, просто примените следующие правила CSS:

1
2
3
4
5
6
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}

Формы в  HTML5

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form>
<label for="range-slider">Slider</label>
<input type="range" name="range-slider" id="range-slider" min="0" max="20" step="1" value="0">

<label for="numeric-spinner">Numeric spinner</label>
<input type="number" name="numeric-spinner" id="numeric-spinner" value="2">

<label for="date-picker">Date picker</label>
<input type="date" name="date-picker" id="date-picker" value="2010-10-06">

<label for="color-picker">Color picker</label>
<input type="color" name="color-picker" id="color-picker" value="ff0000">

<label for="text-field">Text field with placeholder</label>
<input type="text" name="text-field" id="text-field" placeholder="Insert your text here">

<label for="url-field">Url field</label>
<input type="url" id="url-field" name="url-field" placeholder="http://net.tutsplus.com/" required>

<label for="email-field">Email field</label>
<input type="email" id="email-field" name="email-field" placeholder="contact@ghinda.net" required>

<button type="submit" role="button" aria-disabled="false">
<span>Submit form</span>
</button>
</form>

CSS анимация

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

Следующий пример показывает, как произвести цветовое изменение фона. Как Вы можете видеть, мы должны (пока) использовать некоторые собственные свойства, такие как-moz-keyframes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#logo {
margin: 15px 15px 0 15px;
background: red;
float: left;

/* Firefox 4+ */
-moz-animation-name: colour-change;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 30s;

/* Webkit */
-webkit-animation-name: colour-change;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
}

@-moz-keyframes colour-change {
0% { background: red; }
33% { background: green; }
66% { background: blue; }
}

@-webkit-keyframes colour-change {
0% { background: red; }
33% { background: green; }
66% { background: blue; }
}

Теперь создайте блок div и посмотрите что произойдет.

1
2
3
<div id=”logo”>
  Изменение цвета фона!
</div>

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!