Ответы пользователя по тегу CSS
  • Как растянуть страничку?

    @egorinsk
    Фон в данном примере не растягивается, и просто прижат к низу блока и сдвигается вместе с ним.

    background: url(image.jpg) no-repeat 50%100%;

    Что значат 50% и 100%, читайте в описании свойства background-position на сайте w3.org или htmlbook.ru.

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

    p.s. Раз уж вы новичок, обратите внимание на неаккуратность в дизайне сайта на картинке: текст слишком близко прижат к левому краю блока, содержит слишком длинные строки и смотрится крайне рвано и неряшливо. Не вздумайте никогда делать так же, добавляйте поля и ограничивайте ширину текста (чтобы в строке было не более 50-80 символов).
    Ответ написан
    2 комментария
  • BluePrint CSS вытягивание по вертикали!?

    @egorinsk
    html, body { height: 100%}
    .l-layout { min-height: 100%; -height: 100%; -zoom: 1 /* IE 6 */ }
    .l-footer { margin-top: -50px; min-height: 50px; }

    Вот, держите, прибитый к низу футер фиксированной высоты. Если что-то непонятно, гуглите по словам «как прибить футер», найдете еще кучу способов.
    Ответ написан
    Комментировать
  • Как лучше организовать работу с ассетами?

    @egorinsk
    Храните в папке static основного репозитория, в чем проблема? Склеивать естественно надо автоматически, а не руками. Для простых проектов склейщик пишется за 10 минут на bash.
    Ответ написан
    Комментировать
  • Что делать когда кончаются названия для class/id

    @egorinsk
    Вообще, это очень важное и редкое умение, давать имена/названия объектам в программировании. Я часто трачу время именно на то, чтобы подобрать правильное и понятное название (и даже гуглю как аналогичные штуки называют другие разработчики, а также ищу переводы слов), а не написать сам код.

    Что касается вдохновения, тут лучше поменять систему наименований. Например, сделать уникальный класс для блока, а внутри использовать классы с префиксом (по типу предложенной яндексоидами системы БЭМ), вроде:

    .b-news-teaser (внутри b-new-teaser-header, b-new-teaser-list, b-news-teaser-item, b-news-teaser-sticky-flag и так далее), рядом .b-top-comments (внутри классы с таким же префиксом), потом .b-top-articles и так далее. То есть уникальные имена только у блока, а внутренние классы используют префикс.

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

    Естественно, вышеописанные свойства у вашей верстки будут только при соблюдении адекватного подхода (а то бывают товарищи, пишущие что-нибудь вроде p { font:… }, или даже * { color: black; } ну дуракам как известно, ничем уже не поможешь).

    Что касается id — их надо избегать или использовать умные именования. Представьте, вы сверстали форму логина на странице, в которой есть field-username и field-password, а завтра вам понадобилось добавить такую же форму внизу (и у вас клик по лейблу в нижней форме начинает прокручивать страницу вверх). Или открыть в попапе. Или еще что-нибудь. Надо либо отказываться от id, либо, если никак, добавлять к ним уникальные префиксы (например #top-form-field-username и #popup-form-field-username).
    Ответ написан
    1 комментарий
  • Ужасная производительность браузера Android?

    @egorinsk
    Пробовали двигать объекты не через изменение left/margin-left, а через CSS translate? В айфонах вроде в этом случае используется железное ускорение. Надо экспериментировать с разными свойствами и способами, так как что-то одно может работать медленнее, а другое — быстрее. Плохо, конечно, что под каждый браузер в итоге приходится писть свой способ, а что поделаешь.

    Я например сталкивался с тем, что в chrome под Windows CSS-анимация (через transition) работала меделннее и дерганнее, чем яваскриптовая через requestAnimationFrame.

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

    И вообще, может вы просто троянов понаставили на свой планшет и они тормозят его?
    Ответ написан
    1 комментарий
  • Вёрстка для веб с использованием CSS фреймворков

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

    Также надо учитывать, что фреймворки пишут тоже не ахти какие профессионалы, и если олень-разработчик встроил туда css reset, не переопределив все сброшенные стили, или не сделал поддержку IE6/7, то и результат получится соответствующий.
    Ответ написан
  • А что вы используете для тестирования кроссбраузерности вёрстки?

    @egorinsk
    Скачал standalone версии IE7 и IE8 (IE6 встроен в систему) когда их на халяву раздавал Xenocode. Это версии браузеров, которые упакованы в единый exe-файл на несколько десятков мегабайт, туда же запакованы их dll, ключи реестра, файлы, таким образом возможно иметь одновременно запущенными и не конфликтующими IE6, IE7 и 8.

    Фаерфокс и Хром — у меня есть несколько версий — можно скачать с portableapps и установить хоть 30 версий. Чтобы запустить одновременно несколько фаерфоксов разных версий, надо дописать в ярлык запуска какой-то ключ, типа new-session или похожий. Opera тоже существует портабельная, какой-то фанат держит архив разных версий на своем сайте.

    Чтобы тестировать под сафари, проще всего купить мак. Чтобы тестировать мобильный вебкит проще всего купить айфон. Но можно и просто скачать версию под Windows.

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

    IETester этого не обеспечивает, насколько я знаю, в нем результаты неточные, так как он не может нормально виртуализировать приложения.

    Поскольку я добрый, решил поделиться имеющимися exe с IE7 и 8. ВАЖНО! Будьте предельно осторожны при скачивании незнакомых файлов из сети — там может быть троян или вирус.

    IE7 standalone version rghost.net/36113282
    IE8 rghost.net/36113296
    Safari standalone старая версия rghost.net/36113309
    Ответ написан
    Комментировать