Хочешь уверенно проходить IT-интервью?
Мы понимаем, как сложно подготовиться: стресс, алгоритмы, вопросы, от которых голова идёт кругом. Но с AI тренажёром всё гораздо проще.
💡 Почему Т1 тренажёр — это мастхэв?
- Получишь настоящую обратную связь: где затык, что подтянуть и как стать лучше
- Научишься не только решать задачи, но и объяснять своё решение так, чтобы интервьюер сказал: "Вау!".
- Освоишь все этапы собеседования, от вопросов по алгоритмам до диалога о твоих целях.
Зачем листать миллион туториалов? Просто зайди в Т1 тренажёр, потренируйся и уверенно удиви интервьюеров. Мы не обещаем лёгкой прогулки, но обещаем, что будешь готов!
Реклама. ООО «Смарт Гико», ИНН 7743264341. Erid 2VtzqwP8vqy
Даже если вы точно знаете, что изучили все возможности CSS, взгляните на эту статью: некоторые секреты CSS могут стать для вас открытием.
1. CSS-спрайты
Этот трюк объединяет много картинок в одну, тем самым сокращая количество обращений к серверу. Например, чтобы получить 20 изображений для всех кнопок и логотипов вашего сайта (а это 20 HTTP-запросов, если не прибегать к спрайтам), вы просто объединяете все изображения в одно и всякий раз его размещаете. Чтобы была видна нужная часть, просто сдвигайте изображение на требуемое количество пикселей:
.icon {
width: 16px;
height: 16px;
float: left;
background: url(icons.gif) no-repeat;
}
.open .icon {
background-position: 0 -16px; /* вверх на 16px */
cursor: pointer;
}
.closed .icon {
background-position: 0 0px; /* по умолчанию */
cursor: pointer;
}
.leaf .icon {
background-position: 0 -32px; /* вверх на 32px */
cursor: text;
}
CSS-спрайты ускоряют загрузку и работу сайта.
2. Несколько к одному
Применение нескольких стилей/классов к элементу: class="bold red GoldBg"
Foo.Bar(red)
Если у нескольких классов прописаны конфликтующие свойства (например, если бы .red и .GoldBg отвечали за свойство color), тогда применяются правила CSS-специфики. Порядок классов в атрибуте class = "..." не имеет значения. И не забудьте, что IE6 не поддерживает такую возможность, а потому будет применять только последний указанный класс.
3. Отображение title
Вы можете отобразить элемент заголовка документа:
head, title {
display: block;
}
4. Некоторые простые возможности CSS
Вряд ли это относится к по-настоящему скрытым возможностям, но новички могут не знать:
@charset "UTF-8"; /* первая строка в обязательном порядке устанавливает набор символов */
.element {
/* имеет преимущество перед другими стилями */
display: block !important;
/* mozilla .... закругленные углы без изображений */
-moz-border-radius: 10px;
/* эквивалент webkit */
-webkit-border-radius: 10px
}
5. Улучшенный контроль
Вы можете установить ширину переменной для абсолютно позиционированного элемента, указав оба свойства left и right. Это даст вам больше контроля, чем просто установка ширины в процентах:
#myElement {
position: absolute;
left: 5px;
right: 10px;
}
Альтернативный пример:
#myElement{ /* заполнить все пространство :) */
background: red;
position:absolute;
left: 0;
right:0;
top: 0;
bottom: 0;
}
6. Селектор дочерних элементов
На самом деле, это не особенность, но все равно полезная вещь: селектор «потомков» работает во всех браузерах, кроме IE6, что позволяет изолировать IE6 без использования хаков, условных таблиц стилей или т. д. Таким образом, ссылка в следующем коде будет красной в IE6 и синей в любом другом браузере.
CSS
/* Красный для IE6 */
.link {color:#F00;}
/* Синий для всего остального */
#content>.link {color:#00F;}
Вот список селекторов (для CSS2) и диаграммы совместимости браузеров.
7. Скроллбар без фрейма
Возможности CSS ориентированы на удобство написания, и этот способ – тому подтверждение. Вы можете создавать области прокрутки без использования фреймов. Делается это так:
div.foo {
border: 1px solid;
width: 300px;
height: 300px;
overflow: auto;
}
overflow: auto: если содержимое не может быть помещено в div, горизонтальные и/или вертикальные полосы прокрутки появятся по мере необходимости.
overflow: scroll: всегда будут видны обе полосы прокрутки. Если вы хотите, чтобы была только одна полоса, используйте overflow-x или overflow-y, которые поддерживаются современными браузерами, в том числе IE6.
Предупреждение! Некоторые пользователи утверждают, что iPad и iPhone не поддерживают данный трюк: не отображается полоса прокрутки, и просто обрезается контент. Другие же говорят, что в iOS (точнее, в мобильном браузере Safari) все отображается нормально. Тестируйте!
8. Псевдоэлементы :before и :after
Следующий пример вызывает создание строки «Chapter: » перед каждым элементом H1:
H1:before {
content: "Chapter: ";
display: inline;
}
Подробнее об этом рассказывается здесь.
9. Прозрачный PNG в IE6
Этот прием фиксирует прозрачность PNG в браузере IE6. Установите для бэкграунда none и включите изображение в фильтр. Нет необходимости в JavaScript:
.whatever {
background: none; /* Скрыть текущее фоновое изображение, чтобы вы могли заменить его на фильтр */
width: 500px; /* Необходимо указать ширину */
height: 176px; /* Необходимо указать высоту */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}
10. Чистый СSS код
Каждый разработчик хочет видеть в своем коде только необходимое. Небольшие советы по его «очистке» подойдут новичкам.
До:
font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif
После:
font: 1em/1.5em bold italic serif;
До:
background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left;
После:
background: #fff url(image.gif) no-repeat top left;
До:
list-style: #fff; list-style-type: disc; list-style-position: outside; list-style-image: url(image.gif)
После:
list-style: disc outside url(something.gif);
До:
margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-left: 4px
После:
margin:2px 1px 3px 4px; /*также работает для padding*/ margin:0; margin:2px 3px 5px;
Надеемся, приведенные возможности CSS сделают работу с каскадными таблицами стилей более комфортной. Удачи!
Комментарии