Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.
Медийни заявки и CSS файлове
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Най-важното за медийните заявки към цели CSS файлове
Можем да прилагаме медийни заявки не само вътре в CSS, но и директно към целия CSS файл чрез атрибута media в HTML. Това означава, че всички стилове от даден stylesheet ще се зареждат само при изпълнено условие (например минимална ширина на екрана). Ако условието не е изпълнено, браузърът напълно игнорира този CSS файл. Медийните заявки в HTML и тези вътре в CSS се допълват, а не се изключват.
Как да приложите медийна заявка към целия CSS файл
- Отворете HTML файла и намерете връзката към основния CSS файл.
- Добавете атрибут
mediaкъмlinkтага. - Задайте условие, например за екран (
screen) с минимална ширина 1000px. - Запазете файла и тествайте, като променяте ширината на браузъра.
- Наблюдавайте как при ширина под 1000px стиловете не се прилагат, а над 1000px сайтът се стилизира нормално.
Примерна логика: при min-width: 1000px целият main.css се активира само над тази ширина. Ако вътре в самия CSS има друга медийна заявка (например при min-width: 800px), тя ще се изпълни допълнително, когато условията ѝ са изпълнени.
Използвани елементи и правила
link+ атрибутmedia– контролира кога да се зареди целият CSS файлmedia="screen and (min-width: 1000px)"– прилага стиловете само при зададеното условие@media– вътрешна медийна заявка в CSS за допълнителни правилаmin-width– условие за минимална ширина на екрана
