Шпаргалка по верстке для больших и маленьких

Приветствую!

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

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

CSS


Нулевая высота блока с плавающими элементами.

Часто эту проблему решают, задавая float: left родительскому элементу. Но флоатомания (float: left — везде!) – не самая лучшая привычка. Она противоречит хорошему тону написания стилей, и порой приводит к неприятным последствиям.
Оптимальным решением такой проблемы будет:

overflow: hidden

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


Центрирование текста относительно изображения

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

div.class img {vertical-align: -50%;}


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

UPD. Намного лучший прием подсказал пользователь equinox7
vertical-align: middle


Выбор элементов по атрибутам

Странно, но немногие знают, что помимо id и class, любой атрибут можно использовать для выбора элементов. Более того, нам не обязательно знать значение атрибута целиком.
Синтаксис:
элемент[атрибут=”значение”]
элемент[атрибут^=”начальная часть значения”]
элемент[атрибут$=”окончание значения”]
элемент[атрибут*=”подстрока, содержащаяся в значении”]

Примеры:

img[title]  /* все изображения с атрибутом title */
a[href=”http://habrahabr.ru/”] /* ссылка с определенным урлом */
a[href^=”http://”] /* ссылка на внешний ресурс */
a[href$=”.pdf”] /* ссылка на .pdf файл */
img[src*=”habr”] /* файл изображения, в имени которого есть подстрока ”habr” */


Указание версии css файла

Бывает ситуации, когда в css рабочего файла вносятся правки. Но современные браузеры активно кешируют файлы стилей, и конечный пользователь может увидеть изменения еще очень нескоро. Как же нам форсировать события?
Очень просто. В строке подключения css файла, в атрибуте href после имени файла пишем “?v=версия_файла”.
Пример:

<link rel="stylesheet" media="all" href="..css/style.css?v=1" />

Браузер запоминает этот параметр, и проверяет его при каждом посещении сайта. Если версия файла изменится… ну вы и сами все поняли:)

Разные значения border у одного элемента

Предположим, у блока 4 границы, и у всех разные цвета. Можно задать это вот так:

border-top: 1px solid red;
border-right: 1px solid green;
border-bottom: 1px solid blue;
border-left: 1px solid yellow;

Но есть более короткий и красивый путь:

border: 1px solid red;
border-color: red green blue yellow;

По аналогии с margin или padding, в последней строке последовательно задаются цвета для верхней, правой, нижней и левой границ.
Такой же прием можно провернуть и с другими параметрами границ:




HTML5



Спецификацию HTML5 утвердили на этой неделе, и это отличный повод начать делать сайты нового поколения!

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

  1. Добавим новые теги с помощью Javascript:

    <!--[if lt IE 9]>
       <script>
          document.createElement('header');
          document.createElement('section');
          document.createElement('footer');
          document.createElement('nav');
          document.createElement('article');
          document.createElement('aside');
       </script>
    <![endif]-->
    

  2. Немного подкорректируем css:

    header, section, footer, nav, article, aside {display: block;}
    


Вуаля! Теперь наши старички прекрасно отображают сайты с новыми стандартами верстки.

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

<!DOCTYPE html>

Не правда ли, он прекрасен? Несите добро — указывайте новый доктайп!

На этом все. Надеюсь, кому-то эти советы помогут в нелегком деле верстальщика. Успехов!
Share post

Similar posts

Comments 103

    +12
    Скорее все же «Шпаргалка по верстке для больших и маленьких»
    Но в целом пост написан достаточно не скучно :)
      0
      Многие аксакалы верстки побаиваются html5:) Поэтому и для больших тоже… Хоть и в меньшей степени.
        +6
        А где вы вообще увидели здесь шпаргалку из часто встречающихся проблем?

        Автор вы уж извините, но это какой-то неструктурированный обрубок а не статья.
          +1
          Ну ладно, я вон про задание бордеров в таком виде узнал впервые.
        0
        > “?v=версия_файла”.

        Вообще запросы с GET-параметрами порой не кешируются даже браузерами, не то что прокси-серверами. Взять ту же Оперу…
          +1
          Возможно. Но для всяких айпадов эта штука очень полезна.
            +2
            Поэтому можно делать ссылку просто вида /css/{версия}/css.css и в nginx рерайтить это в просто /css/css.css

            Перезалил css, поменял версию, счастлив
              +2
              Согласен. Можно и /css/style-{версия}.css, дело не поменяется. Ну а на стороне сервера отдавать это, конечно, из заблаговременного сделанного style.css.tgz, который, кстати собирается из всех таблиц стилей сайта.

              Странно, что рецепт с ?version=… так живуч. Так же, как живучи привычка вешать в head загрузку 15-20 малюсеньких css-файликов (конечно, каждый со своим довеском ?version=...). Уж не знаю, какой браузер счастлив от этого :)
                +4
                /css/style-{версия}.css

                Поменяется, в двух случаях:
                1. если вы используете импорт стилей (например master.css с содержанием
                @import url("reset.css");
                @import url("tip.css");
                @import url("css.css");
                )
                Тогда вы кладете все стили в папку /css, и подключив /css/master-{версия} браузер ничего не перезагрузит, а /css/{версия}/master.css — перезагрузит все стили

                2. Если вы используете структуру папок типа /assets/master.css, /assets/img/картинки, и в css используете относительные пути к картинкам — то когда вы используете способ /assets/{версия}/master.css — заодно у вас будут и картинки тоже перезагружаться (актуально, когда вы добавляете, например, новые иконки в спрайты)
                  +1
                  заблаговременного сделанного style.css.tgz

                  мы один раз столкнулись на проекте с проблемой, что ie и вроде опера после какого то количества правил css в файле переставали воспринимать все последующие, поэтому стали разбивать на несколько файлов по смыслу
                    +1
                    На Хабре порой комментарии познавательнее статьи :)

                    Спасибо, приму к сведению!
                      0
                      Комментарии на хабре это как общение в кулуарах на конференциях.
                        0
                        Кто не собрался/опоздал на доклад, чтобы прослушать то, что (по сути) можно и так найти в открытых источниках, узнает много нового от реальных практиков, да.
                      +1
                      31 файл css можно подключать на странице в ие, включая те, что в теге style. В каждом внешнем файле через import можно подключить ещё 31 файл стилей.
                        +1
                        и, кажется, до 6-ти уровней вложенности
                          +1
                          это понятно, я про количество самих селекторов.
                          Вот нашел запись:
                          www.thecssdiv.co.uk/2009/08/another-weird-ie6-bug/

                          IE6, 7 и 8 перестают воспринимать css селекторы после 4096-го.

                          Т.е. если у вас большой проект, упаковывать все файлы в один не стоит, если общее количество селекторов может превысить 4096.
                            +1
                            для автоматического разбиения на несколько файлов есть вот такая штука blesscss.com/
                        +1
                        Достаточно использовать md5 или sha сумму файла в имени, разумеется автоматизировав это перед выкладкой.
                        0
                        Зачем столько лишних действий? Разве не проще в дописать 4 символа?)
                        0
                        Можно чуть подробнее? Только что проверил — всё прекрасно кешируется в опере. Проблема была в предыдущих версиях? Аналогичную ситуация наблюдаю за squid-ом.
                          0
                          Да, похоже в свежей Опере справились. Со сквидом все интереснее, его директива

                          refresh_pattern -i (/cgi-bin/|\?) 0 0% 0

                          как раз обещает обратное.

                          Но дело в том, как ваша сквида реагирует на запросы, а в том, что кеш — это экономия и трафика, и времени, и уменьшение нагрузки на сервер. Если сквида каждый раз делает запрос («0%» как раз об этом), то сервер рад не будет.
                            0
                            Я не наблюдал этого глюка и на предыдущих версиях опер (оперой пользуюсь последние лет 10, "?123123123" методом года 3). Может быть глюк совсем архаичный? Или это я так смотрел?

                            Касательно squid-а — печаль. Совершенно не понимаю — зачем они так сделали? Это из коробки так? А как squid дружит с 304?
                          0
                          Чтобы обойти кеширование и в то же время иметь версию в имени файла придумано достаточно изящное решение в .htaccess, которое в факультативном порядке можно доработать для Nginx:

                          # анти-прокси-кэширование стилей
                          # style.v123.css -> style.css
                          RewriteRule ^(.*)\.v[0-9]+\.css$ $1.css
                          RewriteRule ^(.*)\.v[0-9]+\.js$ $1.js
                          
                            +1
                            Собственно, выше уже этот вариант обсуждался.

                            Изящное ли это решение, от схемы зависит, по мне — обычный милый хак :)
                          0
                          Опыт верстки весьма немаленький, но вот про хак для IE с createElement() не знал. Спасибо :)
                            +10
                            html5shiv.js
                              +1
                              + iepp чтобы оно на печати не поехало.
                            0
                            div.class img {vertical-align: -50%;}


                            Мне кажется, или тут лучше использовать line-height?
                              +12
                              Лучше использовать div.class img {vertical-align: middle;}
                                0
                                Ну да, а потом новички начнут задавать вопросы, почему не работает у них в блочном элементе. Да и не такая уж и середина это на самом деле.
                                  +3
                                  Речь не о блочном элементе, а о конкретном примере с картинкой.
                                  0
                                  Нет, middle не прокатит, если не задать, как минимум, высоту line-height. Поэтому с фиксировнным значением получается экономнее.
                                    +1
                                    А вы пробовали?
                                      0
                                      Конечно. Насколько я знаю, vertical-align: middle работает только в элементах с display: table-cell или с указанной высотой строки.
                                        +4
                                          +1
                                          Черт, и правда, что неправда!
                                          Благодарю!
                                            0
                                            Так вы пост подправьте :-) Комментарии-то не все читают.
                                              0
                                              Да, немного прослоупочил, простите. Хотел посмотреть, может еще что-нибудь сенсационное для меня напишут :)
                                  0
                                  Можно и через line-height.
                                  Но я предпочитаю помещать изображение прямо в тег a, тогда vertical-align незаменим.

                                  Но, в любом случае, это только один из вариантов.
                                  • UFO just landed and posted this here
                                    0
                                    Оптимальным решением такой проблемы будет:
                                    overflow: hidden


                                    А как насчет блока с clear: both в конце контейнера? Так не будет побочного эффекта, как в примере, отчего считаю такой вариант более оптимальным.
                                      +1
                                      Ну, это как посмотреть. 2 слова в css файле выглядят предпочтительнее, чем div, который может повторятся по нескольку раз на странице.

                                      Поэтому, если известно, что никаких заходящих за границу примочек не предвидится, overflow: hidden — оптимальный вариант.
                                        +3
                                        Тогда .clearfix — этот метод основан на clear: both, но без лишних элементов.
                                          0
                                          Крутяк, только для IE<9 не прокатит:)
                                            +2
                                            во-первых, для ИЕ<8. :after работает в ИЕ8. во-вторых, там это предусмотрено и он работает везде.
                                          +3
                                          откройте для себя псевдоэлементы:
                                          div:after {
                                            content: ".";
                                            height: 0;
                                            display: block;
                                            clesr:both;
                                          }
                                          

                                          И никакой хак в виде oveflow:hidden не понадобится
                                            0
                                            Спасибо, давно открыл:)
                                            Согласен, способ самый универсальный. Спасибо вам за него.
                                            Но опять же, много текста. В 99% случаев можно обойтись 2-мя словами.
                                              +1
                                              На большом проекте, когда вокруг тебя несколько тысяч строк css-а в десятках файлов от разных разработчиков, лишний overflow:hidden, о котором ты не знаешь на уровне выше тебя может принести тонны головняка. Поэтому способ с псевдоэлементом намного предпочтительнее.
                                                0
                                                Согласен. Но вы сами сказали, что это для больших проектов.
                                                Я думаю, что без необходимости код лучше не усложнять.
                                                  +1
                                                  Любой проект, даже самый малюсенький, даже сайт-визитку, надо воспринимать ка большой проект. Они имеют привычку разрастаться. И тогда вы погрязнете в куче кода типа «ну у меня же маленький проект, и так сойдёт».
                                                    +1
                                                    Тут уже вопрос психики.
                                                    Я не поверю, что сайт-визитка разрастется до таких масштабов, что мне при необходимости не удастся в нужном месте заменить overflow:hidden на .clearfix. Я хочу сделать все максимально просто.

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

                                                    Это порядком сократит время разработки, и упростит последующую поддержку.
                                                +2
                                                overflow:hidden — не хак, это поведение описано в спецификации. Такого же эффекта можно добиться если применить к элементу display: inline-block; или display: table; В общем все что меняет контекст форматирования.

                                                Но вариант с псевдоэлементом, конечно, лучше все равно.
                                                  0
                                                  Можно ткнуть в спецификацию?
                                                  • UFO just landed and posted this here
                                                      0
                                                      Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

                                                      Cогласен. Проглядел.
                                                • UFO just landed and posted this here
                                                    0
                                                    Согласен. Но у вас и случай гораздо более сложный, чем родитель с плавающими детьми и, как следствие, нулевой высотой. Я вообще из-за всех этих штук флоаты не люблю, не для этого они предназначались.
                                                    • UFO just landed and posted this here
                                              • UFO just landed and posted this here
                                                0
                                                Всегда шокировала такая запись:
                                                document.createElement('header');
                                                document.createElement('section');
                                                document.createElement('footer');
                                                document.createElement('nav');
                                                document.createElement('article');
                                                document.createElement('aside');
                                                


                                                Гораздо проще написать:
                                                for(var i=0, el="header footer nav section article aside".split(" ");i<el.length;i++){
                                                		document.createElement(el[i])
                                                }
                                                
                                                  +12
                                                  Что проще написать — вопрос спорный. А вот то, что первый вариант читается и понимается намного легче и быстрее — это факт.
                                                    0
                                                    факт в том, что код вам надо поддерживать, а не только читать и понимать. второй вариант редактируется гораздо проще.
                                                    см. en.wikipedia.org/wiki/Don%27t_repeat_yourself
                                                      0
                                                      Чтение и понимание это важнейшая часть процесса поддержки кода.

                                                      Простота редактирования… ну, у меня есть ощущение, что количество кнопок, которое потребуется нажать в Vim будет примерно одинаковым в обоих случаях.

                                                      Что касается DRY — не стоит верить всем модным аббревиатурам, да и википедии тоже. Некоторые вещи действительно категорически нельзя дублировать. А в других случаях дублирование абсолютно уместно и даже необходимо. Нормализация данных в базе, goto, копипаст, Code Reuse, XML, ООПухоль мозга… много их было, объявленных вселенским злом и вселенским добром, а потом выяснялось, что и зло не такое ужасное а иногда так и вовсе жизненно необходимо, и добро иногда так доставляет, что зла на это добро не хватает. Конкретно в данном примере кода Ваш DRY идёт лесом, ибо он здесь нафиг никому не сдался.
                                                        0
                                                        Неужели вам этот вариант (ниже) не милее? К тому же он достаточно элементарен, чтобы на нём не спотыкался глаз.

                                                        var tags = [ 'header', 'footer', 'nav', 'section', 'article', 'aside' ];
                                                        for( var i = 0, n = tags.length; i < n; ++ i )
                                                        {
                                                          document.createElement( tags[ i ] );
                                                        }
                                                        

                                                        Вариант powerman-а, конечно, перегиб.
                                                          0
                                                          Для меня DRY свят и непогрешим, но в вашем варианте, если сравнивать с исходным копипастом:

                                                          • больше синтаксических конструкций
                                                            Массив, for, var, сравнение, инктемент, присвоение, обращение по индексу, вызов метода. Вместо одного только вызова метода (повторенного 6 раз).
                                                          • 3 дополнительные переменные
                                                          • всего на 1 строку меньше (да, я посчитал скобочки)
                                                          • строковые литералы отдалены от места фактического использования двумя строками. В копипасте — использование на месте.


                                                          Я не говорю, что какой-то вариант хуже или лучше. Просто явного превосходства нет ни у одного из них.
                                                            0
                                                            Помимо прочего, я считаю, мой вариант более идеологически верный. Посудите сами — в чём заключается задача? В подключении тегов <header>, <footer>, <section>, <article>, <aside> к списку поддерживаемых тэгов, или всё таки подключения ряда тегов (в число которых входят: ...) к списку поддерживаемых тегов? В данной задаче есть какая-либо существенная разница между aside и section, чтобы был резон описывать подключение каждого тега в отдельно взятой строке?

                                                            Сейчас их 6, завтра 12. Добавим ещё 6 строк? :) А если будет удобно передавать список тегов извне в отдельном массиве? Ну и т.д… Я, конечно, несколько перегибаю палку, но ведь вопрос идеологический. На мой взгляд, единственное преимущество исходного варианта — в скорости клепания таких строк.
                                                              0
                                                              Не столько в скорости клепания сколько в скорости чтения.

                                                              К сожалению самый идеологически верный способ довольно громоздок.

                                                              При поддержке ECMAScript5 вопросов бы не возникало:

                                                              var tags = [ 'header', 'footer', 'nav', 'section', 'article', 'aside' ];
                                                              tags.forEach(function(entry) { //можно даже без дополнительной переменной обойтись
                                                                  document.createElement(entry);
                                                              });
                                                              
                                                              0
                                                              Такое ощущение, что про метапрограммирование автор и его приверженцы не слышали) DRY спасает от лишней головной боли.
                                                                0
                                                                Никого обидеть не хочу, приношу извинения, если кого-то задел, просто вывод (возможно поспешный) напросился сам собой.
                                                              +4
                                                              Я Вам скажу, какой вариант мне милее. Вот такой:
                                                              document.createElements('header', 'footer', 'nav', 'section', 'article', 'aside');
                                                              
                                                              Он ещё легче в чтении и поддержке.
                                                                +1
                                                                Или вот такой, если js это поддерживает:
                                                                [ 'header', 'footer', 'nav', 'section', 'article', 'aside' ].forEach(document.createElement);
                                                                
                                                                  +2
                                                                  js поддерживает map:

                                                                  ['header', 'footer', 'nav', 'section', 'article', 'aside'].map( function(el) { document.createElement(el); })
                                                                  
                                                            –2
                                                            Первый вариант — признак непрофессионализма
                                                            0
                                                            Э-э-э…

                                                            ['header', 'footer', 'nav', 'section', 'article', 'aside'].map( function(el) { document.createElement(el); })
                                                            
                                                              +1
                                                              Это нужно только для IE8 и ниже. А они не поддерживают метод map.
                                                              0
                                                              Копипаста в умеренных дозах нередко выразительнее смотрится и лучше читается.

                                                              Хотя лично мне в общем идеологически противна.
                                                              +2
                                                              1) Нулевая высота блока с плавающими элементами.
                                                              Самый лучший способ решить эту проблему это всевдо элемент ::after

                                                              2) HTML5 — описанный вами способ это примитивно. Этот способ не решает целой группы проблем при работе с DOM в старых браузерах. Намного лучше воспользоваться HTML5Shiv и подобными штуками а не изобретать свое колесо.

                                                              В общем и сложном — все это банально.
                                                              • UFO just landed and posted this here
                                                                  0
                                                                  Сколько верстаю… пользуюсь clearfix'ом и не наблюдал проблем указанных в примере… я к тому, что все зависит от того «чем и как» верстается… Хотя новая фича понравилась)
                                                                  • UFO just landed and posted this here
                                                                      +1
                                                                      Не забываем про обновление того варианта!
                                                                      Строки:

                                                                      /* Лекарство бага с отступом в Opera */
                                                                      font-size: 0.05em;
                                                                      line-height: 0.05em;

                                                                      Заменены на:
                                                                      font: .13em/0 sans-serif;

                                                                      т.к. с выходом Opera 12.10 оно поломалось, плюс sans-serif решает проблему в случае если к этому же элементу будет применяться сторонний шрифт.

                                                                    0
                                                                    Ну методов с клерфиксами на самом деле много. Метод по ссылке интересен, но я пока не сталкивался с макетами где .clearfix делал что-то не так. Хотя возьму на заметку.

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

                                                                    По поводу HTML5Shiv и т.д. — помимо просто стилизации частенько встречаются задачи по работе с этими элементами из JavaScript и приведенный метод не сработает в случае вставки тегов через innerHtml. По крайней мере случаются баги. В целом же только для стилизации да, сойдет.
                                                                    • UFO just landed and posted this here
                                                                        0
                                                                        Безопаснее это да, но опять же способ не универсален.
                                                                  0
                                                                  Может и не по теме статьи, но всё же спрошу уважаемый All: что-то изменилось с центрированием? Есть ли надёжный метод без javascript, используя только CSS, разместить DIV в центре экрана браузера? Спасибо.
                                                                    0
                                                                    Есть — там как раз о расположении блоков по центру экрана браузера.
                                                                    +3
                                                                    Очень просто. В строке подключения css файла, в атрибуте href после имени файла пишем “?v=версия_файла”.

                                                                    Очень часто вижу, да и сам так делаю: пишут не ?v=версия, а просто банально после знака вопроса указывают дату, например
                                                                    style.css?25122012
                                                                      +1
                                                                      На шпаргалку не тянет, но за border и отрицательное значение vertical-align спасибо.
                                                                      • UFO just landed and posted this here
                                                                          0
                                                                          Логично! Ведь position:relative у блока указывает, что его дочерние элементы должны позиционироваться относительно его.
                                                                          Именно это я и имел ввиду.
                                                                          • UFO just landed and posted this here
                                                                              +1
                                                                              Да. Тут с вами согласен.
                                                                          0
                                                                          От верстки очень далек, но все равно эти все приемы знал. Хочется чего-то посложнее :)
                                                                          А для кого новыми оказались
                                                                          document.createElement('header');
                                                                          и подобные — можете почитать об этом в замечательной книжке по HTML5.
                                                                            –1
                                                                            Пост показался скучным, показаны достаточно простые вещи. Для тех кому реально не хватает практики, рекомендую ресурс для изучения:
                                                                            w3schools.com/html/html5_intro.asp
                                                                            Нажав, «Try it yourself» можешь посмотреть результат кода в браузере.
                                                                              –2
                                                                              Пишу вот так:

                                                                              <!doctype HTML>
                                                                                +3
                                                                                молодец. держи нас в курсе.
                                                                                +1
                                                                                Я бы еще упомянул об использовании cdn в случае использования js-фреймворков.

                                                                                А createElement для IE заменяю на
                                                                                <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
                                                                                  +1
                                                                                  <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
                                                                                  Вот так лучше, не надо думать о том по какому протоколу отдается страница
                                                                                    +2
                                                                                    Скорее уж так:
                                                                                    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
                                                                                    <script>window.jQuery || document.write('<script src="/bundles/relaxercore/jquery-1.8.3.min.js">\x3C/script>')</script>
                                                                                    
                                                                                      0
                                                                                      Путь к локальной версии уже самому нужно дописывать. Но рассчитывать на живучесть CDN не стоит.
                                                                                        0
                                                                                        и лучше этот код в head не вставлять :)
                                                                                          0
                                                                                          Вообще хорошей практикой является вынос всех подключений JS файлов поближе к закрывающему body. Так что да.

                                                                                  Only users with full accounts can post comments. Log in, please.