<rmcreative>

RSS

Все заметки с тегом «HTML»

  1. Ускоряемся в вёрстке, вебинар Юрия Артюха

    12 февраля 2014

    1 марта с 11:00 по 12:30 по Киевскому времени в формате вебинара можно будет послушать Юрия «akella» Артюха. Одного из самых опытных верстальщиков и автора cssing.org.ua. Известен он своими статьями и проектами, над которыми работал. Прежде всего kremlin.ru, subscribe.ru, sports.ru, ukr.net, zn.ua, delo.ua и pravda.com.ua.

    Рассказ будет про нешаблонную вёрстку в сжатые сроки и её автоматизацию.

    План:

    • Оптимизируем компьютер.
    • Выжимаем всё из текстового редактора.
    • Фотошоп, или не фотошоп.
    • Автоматизируем генерацию CSS и HTML.
    • Как назвать тот элемент, название которого вы до сих пор не придумали, или ускоряем мозг.

    Стоимость участия на данный момент 240 грн (30$).

    Регистрируемся

    Промо-код на скидку 10%: RMCREATIVE_WEBINAR.

    6 комментариев
  2. Верстаем код с номерами строк

    27 января 2014

    Задачка оказалась не совсем тривиальной. Надо учесть следующее:

    1. Номера могут начинаться с какого угодно числа, могут разрываться, могут быть не числами (например, ... для обозначения того, что часть кода не приводится).
    2. Номера не должны копироваться.
    3. Длинные строки должны переноситься.

    Решается так:

    <table class="code">
        <tr>
            <th data-line-number="1"></th>
            <td>public static function autoload($className)</td>
        </tr>
        <tr>
            <th data-line-number="2"></th>
            <td>{</td>
        </tr>
    .code th:before {
       content: attr(data-line-number);
    }

    Важный момент тут использование data-attributes и псевдо-селектора :before. Первое позволяет расставить номера на стороне сервера, второе — вставить их в ячейку. При этом они не выделяются и не копируются.

    Живой пример

    13 комментариев
  3. Официальный набор для тестирования под Internet Explorer

    17 сентября 2013

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

    Пользуемся

    14 комментариев
  4. Bootstrap 3

    20 августа 2013

    Релизнулся разметочно-стилевой фреймворк Bootstrap версии 3. Что бы там не говорили, но штука очень полезная: экономит время, нервы и результат выходит лучше, чем делать по-быстрому с нуля.

    В версии 3 Bootstrap, наконец, стал по-настоящему независим от Twitter, который его породил, и обзавёлся отдельным сайтом. Стоит отметить следующие изменения:

    • Новый плоский дизайн для упрощения его стилизации. Старый можно вернуть специальной темой.
    • Ещё большая заточенность сетки и компонент под мобильные устройства.
    • По умолчанию для всего используется box-sizing: border-box.
    • Переписали JavaScript-плагины. Обещают, что будет работать лучше.
    • Значки теперь представлены в виде шрифта, а не в виде картинок.
    • Сделали правильные модальные окошки.
    • Добавили панели и группированные списки.
    • Убрали accordion (заменили панелями), подменю, typeahead и ещё всякие мелкие штуки.
    • Именование классов поменялось.
    • Добавили документации.
    • Не поддерживается Internet Explorer 7 и Firefox 3.6. Internet Explorer 8 поддерживается через Respond.js.

    Кстати, в Yii2 Bootstrap 3 и обёртки для него включены в состав фреймворка.

    11 комментариев
  5. Foundation 3

    30 июня 2012

    Вышла третья версия фреймворка Foundation. Скорее всего вы слышали о популярном Twitter Bootsrap. После него большинство фреймворков смотрится блекло: элементов меньше, разметка ещё нелогичней, куча багов и ничего нового. Так вот Foundation отличается от Bootstrap в лучшую сторону:

    • Разметка более лаконичная и логичная.
    • Заточен для работы с кучей всяких устройств. Можно контролировать, как именно будет выглядеть сайт при каких параметрах экрана. Имеется очень гибкая адаптивная сетка.
    • Для всего используется box-sizing: border-box.
    • Неплохие наборы кнопочек, формочек, менюшек и мелких элементов.
    • Табы, галерея и модальные окошки, которые отлично работают на всех устройствах.

    • Пробуем

    • Документация и демонстрация возможностей
    13 комментариев
  6. Chosen, функциональные и красивые селекты

    28 июля 2011

    Элементы select доставляют достаточно много проблем: начиная с того, что пользоваться ими не очень удобно при большом количестве вариантов и заканчивая тем, что применить к ним стили в старых версиях IE — совершенно неблагодарное занятие.

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

    Пользуемся

    7 комментариев
  7. Запретить выделение текста средствами браузера

    25 июля 2011

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

    Пример:

    Попробуйте выделить и скопировать этот текст.

    Для основных браузеров достаточно следующих стилей:

    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    IE приходится обучать отдельно:

    <div unselectable="on">текст</div>

    UPD: допиленное решение mihdan-а.

    15 комментариев
  8. Комментарии в разметке

    25 февраля 2011

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

    <!--news list start-->
    туча кода
    <!--news list end-->

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

    <?php // news list start ?>
    туча кода
    <?php // news list end ?>

    или

    <%-- news list start --%>
    туча кода
    <%-- news list end --%>
    
    13 комментариев
  9. meta charset

    18 декабря 2010

    Кодировку текста в HTML-документе можно указывать не только так:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    но и покороче:

    <meta charset="utf-8">

    Поддерживается всеми актуальными браузерами, включая IE6.

    14 комментариев
  10. Тег link

    12 декабря 2010

    Тег <link чаще всего используется для подключения внешних CSS-файлов:

    <link rel="stylesheet" type="text/css" href="http://example.com/css/main.css">

    Предназначен он для указания ссылок на ресурсы, связанные с данной страницей и также широко используется для «подключения» favicon и RSS. Довольно много полезных примеров приведено в рекомендации HTML5.

    Кроме перечисленного там, мне приходилось использовать тег следующим образом:

    Значок для iPhone и других яблочных устройств:

    <link rel="apple-touch-icon" href="http://example.com/apple-touch-icon.png">

    OpenSearch. Используется различными браузерами для подсказок в поисковой строке.

    <link rel="search" type="application/opensearchdescription+xml" title="example website" href="/opensearch.xml">

    Поисковый редирект для Google.

    <link rel="canonical" href="http://example.com/my_cool_article.html">

    Как ещё вы используете тег <link?

    3 комментария