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

Можно уточнить:

    1. Среда, 10 марта

      Кроссбраузерный CSS transform

      CSS transform — штука очень интересная, но так как она не поддерживается IE, пользуются ей не очень часто. К счастью, для IE появляется всё больше библиотек, восполняющих его недостатки. На этот раз наш герой — cssSandpaper.

      Несколько демонстраций:
      - Поворот.
      - Наклон.
      - Куб.
      - Ещё примеры.

      cssSandpaper реализует поддержку IE через фильтр DXImageTransform.Microsoft.Matrix, использовать который сам по себе довольно сложно. При использовании библиотеки, доступны: -sand-transform, частичная поддержка -sand-box-shadow, -sand-gradient.

      Официальный анонс и библиотека

      , ,
      Комментарии: 1

    1. Понедельник, 8 марта

      IE7.js 2.1 (beta3)

      Обновился проект Дина Эдвардса, обучающий IE понимать стандарты.

      - IE 5.0 больше не поддерживается.
      - В quirks mode не применяются фиксы для layout (кроме IE5.5).
      - IE9.js для улучшения IE8.
      - Поддержка opacity теперь в IE9.js.
      - Новые селекторы (IE9.js):
      - :first-of-type.
      - :last-of-type.
      - :only-of-type.
      - :nth-of-type().
      - :nth-last-of-type().
      - убран :contains() (другие браузеры его не поддерживают).
      - Изменена поддержка PNG.
      - Куча багфиксов, в том числе и некликабельные ссылки.
      - Новый, более быстрый, селекторный движок (тот же, что будет в новом base2).

      Смотрим демо и Пробуем

      , ,
      Комментарии: 1

    2. ZenCoding 0.6 для Notepad++

      В Notepad++ добавлена поддержка Zen coding 0.6. Долгое время реализовать это было затруднительно, но после того, как sieukrem добавил в Notepad++ поддержку JavaScript, Сергей Чикуёнок реализовал задуманное.

      Забрать можно из файлов проекта на Google Code

      , , , ,
      Комментарии: 1

    1. Понедельник, 15 февраля

      Steve Souders об особенностях клиентской оптимизации

      Steve Souders поделился сразу несколькими занятными фактами об особенностях современных и не очень браузеров.

      IE и независимые от протокола URI
      Internet Explorer 7 и 8 при использовании URI вида "//rmcreative.ru/css/main.css" будут загружать файл два раза. При явном указании http, https или использовании относительных URI этого не происходит.

      document.write и FireFox
      При загрузке скриптов через document.write в FF (в том числе и в 3.6) блокируются остальные загрузки.

      IE грузит стили с media="print"
      Причём делает это даже когда мы ничего не печатаем. При этом до полной загрузке блокируется рендеринг страницы.

      Подключаем стили через JavaScript
      Можно избежать блокировки, используя JavaScript:


      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = '/main.css';
      document.getElementsByTagName('head')[0].appendChild(link);



      Chrome, Safari и загрузка фоновых изображений
      Перечисленные браузеры начинают загружать фоновые изображения до подгрузки CSS. Таким образом, изображения будут загружены даже если в CSS они переопределены.

      Источники:
      - Souders blasts off 5 in a row
      - Missing schema double download
      - document.write scripts block in Firefox
      - media=print stylesheets
      - dynamic stylesheets
      - Speculative background images

      , ,
      Комментарии: 4

    1. Понедельник, 25 января

      Zen Coding для Akelpad и cheat sheet-ы

      К проекту Zen Coding, позволяющему быстро набирать HTML и CSS, добавилась частичная поддержка Akelpad и шпаргалки.

      Всё это можно забрать из файлов проекта

      , , , ,
      Комментарии: 0

    1. Среда, 20 января

      Равномерный фон под текстом

      http://chikuyonok.ru/u/2010/01/example.png

      Несколько интересных способов сделать padding фона у многострочной неквадратной надписи.

      Изучаем и предлагаем свои решения

      Комментарии: 0

    1. Четверг, 7 января

      Кроссбраузерный border-radius

      Одной из самых больных тем верстальщиков являются скругление уголков. В последнее время ситуация улучшается и браузеры потихоньку начинают поддерживать столь востребованные CSS-свойства. FF, Safari, Chrome делают это через свойства с своими особыми префиксами, Opera — скоро будет делать без префиксов. В стороне у нас стоит, как всегда, IE.

      К счастью, IE можно довольно красиво победить его же средствами. Одно из понравившихся мне решений, использующее VML и behaviour — curved-corner. Для использования сливаем border-radius.htc, складываем рядом с CSS и используем следующий код:


      .my-block {
        /* Для хороших браузеров */
        -moz-border-radius: 10px; /* Firefox */
        -webkit-border-radius: 10px; /* Safari, Chrome */
        -khtml-border-radius: 10px; /* KHTML */
        border-radius: 10px; /* CSS3 */
        /* Для плохих IE */
        behavior: url(border-radius.htc); /* учим IE border-radius */
      }



      Да, кстати, по соседству можно найти менее востребованный, но всё же полезный behaviour для box-shadow.

      Демо

      , , ,
      Комментарии: 12

    1. Среда, 6 января

      Вёрстка растягивающихся сайтов

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

      Читаем

      Комментарии: 0

    1. Четверг, 31 декабря 2009

      Рендеринг: отрисовка, перерасчет дерева / макета, стилизация

      Перевод довольно подробной статьи о процессе отрисовки HTML и CSS.

      Читаем

      ,
      Комментарии: 0

    1. Пятница, 25 декабря 2009

      CSS hack для Firefox 3.5

      И ещё один страшный и ужасный хак. На этот раз для FF3.5.

      Рассматриваем

      , ,
      Комментарии: 1

  1. 1
  2. 2
  3. 3
  4. Последняя

Подписаться на RSS

Интересное

Разделы

  1. (5)
  2. (11)
  3. (6)
  4. (9)
  5. (6)
  6. (6)
  7. (16)
  8. (59)
  9. (264)
  10. (51)
  11. (16)
  12. (12)
  13. (37)
  14. (5)
  15. (10)
  16. (14)
  17. (18)
  18. (12)
  19. (6)
  20. (8)
  21. (7)
  22. (29)
  23. (62)
  24. (18)
  25. (64)
  26. (5)
  27. (193)
  28. (56)
  29. (6)
  30. (18)
  31. (72)
  32. (27)
  33. (65)
  34. (32)
  35. (10)
  36. (5)
  37. (6)
  38. (5)
  39. (309)
  40. (11)
  41. (6)
  42. (12)
  43. (8)
  44. (18)
  45. (6)
  46. (15)
  47. (114)
  48. (18)
  49. (6)
  50. (8)
  51. (66)
  52. (16)
  53. (6)
  54. (17)
  55. (5)
  56. (26)
  57. (7)
  58. (27)
  59. (7)
  60. (12)
  61. (11)
  62. (118)
  63. (31)
  64. (5)
  65. (18)
  66. (22)
  67. (9)
  68. (6)
  69. (8)
  70. (41)
  71. (10)
  72. (6)
  73. (12)
  74. (8)
  75. (5)

Друзья