НОВЫЕ ВОЗМОЖНОСТИ CSS4 Текст научной статьи по специальности «Компьютерные и информационные науки»

// Труды Экспедиции, снаряженной Императорскими Вольным экономическим и Русским географическим обществами, для исследования хлебной торговли и производительности в России. СПб.: Тип. В. Безобразова и компания, 1870. - Т. II. - Вып. 1. - 711 с. 6. Бессмертный полк Москва. Электронная книга памяти [электронный ресурс]. - Режим доступа: http://www.polkmoskva.ru/people/1058340/ -Валькман Роланд Юрьевич. - (Дата обращения: 05.09.2018).

УДК 004.056.55

Серов С.С. студент 4 курса

факультет «Информатика и системы управления»

Шапиев М.М. студент 4 курса

факультет «Информатика и системы управления»

Серов С.А., к. техн. н.

доцент

кафедра «Экология и промышленная безопасность»

МГТУ им. Н.Э. Баумана Россия, г. Москва

НОВЫЕ ВОЗМОЖНОСТИ CSS4

Аннотация: В данной статье рассматривается язык CSS4. Особое внимание обращается на нововведения в функции языка, его основы и функциональную сторону. Вся предложенная информация может поменяться по мере приближения к дате выхода «языка».

Ключевые слова: CSS, вёрстка, программирование, веб-разработка, анализ нововведений, CSS4.

Serov S.S. student

4 year, Faculty of Computer Science and Management Systems

BMSTU them. N.E. Bauman Russia, Moscow Shapiev M.M. student

4 year, Faculty of Computer Science and Management Systems

BMSTU them. N.E. Bauman Russia, Moscow

Serov S.A., Candidate of Technical Sciences, Associate Professor Associate Professor of the Department of Ecology and Industrial Safety

BMSTU them. N.E. Bauman Russia, Moscow

NEW CSS4 FEATURES

Abstract: This article discusses the CSS4 language. Particular attention is paid to innovations in the functions of the language, its foundations and functional side. All the proposed information may change as it approaches the release date of the "language ".

Keywords: CSS, layout, programming, web development, innovation analysis, CSS4.

CSS4 определенно по-прежнему находится в процессе разработки, а это значит, что многие новые функции, над которыми работает команда редактирования W3C, по-прежнему имеют возможность удаления, а другие могут быть добавлены. Означает ли это, что пришло время отказаться от работы с CSS3? Конечно, нет! CSS4 основывается на CSS3, поэтому, безусловно, продолжайте свой путь к тому, чтобы стать главным разработчиком CSS3. Кроме того, CSS4 все еще далек от выпуска и реализации в браузерах. Так почему мы даже рассматриваем эту нестабильную версию?

Во-первых, взглянуть на некоторые из возможностей с CSS, уровень 4, довольно интересно. Во-вторых, вам может быть предложено повесить на некоторые проекты, которые кажутся совершенно невозможными прямо сейчас. И, третье, может быть, это даст вам преимущество в изучении CSS4, чтобы он не казался слишком ошеломляющим, когда он наконец был выпущен.

Команда W3C отредактировали черновики, доступные для предварительного просмотра для Селекторов и Запросов Медиа. Итак, без дальнейших церемоний, давайте погрузимся!

Медиа-запросы Уровень 4

Проще говоря, медиа-запросы позволяют реагировать на дизайн. Медиа-запросы были впервые введены в CSS в версии 3 и позволили разработчикам создавать решения для стилей на основе браузера, на котором загружалась веб-страница. Запросы уровня 4 очень новы, как и менее чем за месяц. Возможно, вы даже не знали, что команда W3C публично опубликовала свой проект редактирования. Некоторые изменения, внесенные в существующие функции CSS3, следующие:

Возможные изменения медиаобъектов - функция "(функция) будет оцениваться как true, если (функция: x) будет оцениваться как true для значения x, отличного от нуля или нуля, за которым следует идентификатор единицы (то есть, кроме 0, 0px, 0em и т. Д. .) или ключевое слово «нет».

Неверные типы медиа могут включать в себя «и», «не», «только» и «или».

Теперь может потребоваться свободное пространство после «не» и «только», а также вокруг ключевого слова «none».

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

включать следующие дополнения:

• Script

• Pointer

• Hover

• Luminosity

Script

В принципе, скрипт должен запросить, поддерживается ли ECMAScript (например, JavaScript). Другими словами, сценарий предоставляет более стандартный способ запроса кода JS (и другого клиентского скрипта). Вы сохраняете некоторое время, используя одно из нескольких методов для определения того, доступна ли JS с этой новой новой функцией.

Pointer

Этот запрос повлияет только на то, что он звучит так: указательное устройство (т.е. Мышь) или его отсутствие. Настройки включают «none», если нет указывающего устройства; « coarse», если указывающее устройство имеет меньшую точность, например сенсорный экран; и « fine», если указатель достаточно точен, например, с сенсорной панелью на мышах или стилусах.

Hover

Эта функция просто позволит вам запросить, может ли указатель мыши наводиться на страницу. Например, мышь может навестись, а сенсорный экран не может. Как и в случае с запросом на указатель, Hover позволит использовать гораздо более точные интерактивные функции на гибкой веб-странице.

Luminosity

Наконец, этот запрос предоставит возможность контролировать внешнюю яркость устройства, на котором отображается веб-страница. Включены три значения: «тусклый» для темных сред, «нормальный», когда экологическое освещение не требует какой-либо регулировки на части устройства и «вымывается» для исключительно ярких условий, таких как солнечный свет под открытым небом.

Как и в случае с запросами CSS3, запросы уровня 4 также будут динамическими, что означает, что вы можете просто подключить или отключить вход, а ваши стили будут меняться по мере необходимости.

Selectors Level 4

Селекторы для CSS4 значительно продвинулись в разработке, чем медиа-запросы. Итак, есть что обсудить. Конечно, некоторые из селекторов могут быть обновлены или полностью удалены к тому моменту, когда CSS4 действительно будет выпущен.

• Псевдоклассы :not( ) и :matches( )

В CSS3 с псевдоклассом отрицания: not () в качестве аргумента допускался только один простой селектор. Однако на уровне 4: not () теперь

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

p :not (.active, .visible) { text-align: right;

}

Это же относится к новому псевдо-классу: matches (), который позволяет сопоставлять стили с определенными элементами. Просто используйте класс: matches (), чтобы сгруппировать список селекторов вместе, и вуаля! у вас есть одна строка группировки кода элементы для сопоставления.

article: matches (.active, .visible) { background: pink;

}

• Селекторы атрибутов: их чувствительность к регистру

В появившейся версии CSS4 значения атрибутов больше не будут чувствительным к регистру, если перед закрывающей скобкой «]» используется идентификатор. Например, в

[frame = hsides i] {border: none; }

атрибут «hsides» будет применяться к «frame», даже если написано «hsides», «HSIDES», «Hsides» и т. д. И это верно даже в XML с чувствительными к регистру значениями атрибутов. И это правильно, потому что таким образом удастся избежать большой отладки.

• Псевдоклассы языков

Очередным новым для CSS4 является псевдокласс :dir (). Как псевдокласс направленности, это фактор, используемый в HTML5, чтобы помочь определить направленность элементов, а также другие факторы, такие как окружающий текст. A: dir(lrt) псевдокласс даст элемент направленности справа налево, а a: dir(lrt) будет иметь направленность слева направо. Имейте в виду, что: dir () не совпадает с селекторами атрибутов [dir = ...].

Также новым для лингвистических псевдоклассов является с класс: lang ().

Теперь: lang () может выполнять подстановочные знаки. Например: lang (ru-RU) будет соответствовать всем совпадающим языковым тегам, а не только «ru-RU» и «ru-RU-1998». Совпадение подстановочных знаков на основном языке или первый подзаголовок выполняется со звездочкой. Значит, * -KR будет равносильно 'ru-KR', 'pl-KR' и т. Д.

• Псевдоклассы местоположения

Не стоит путать с геолокацией или подобными технологиями, псевдоклассы Location ссылаются на местоположение посетителя на вашем сайте. Несколько полезных изменений могут возникать в псевдоклассах местоположения в CSS4. Один из них - псевдо-класс гиперссылки, который в настоящее время называется: any-link, в котором он обозначает любой

элемент, являющийся исходным якорем гиперссылки.

Еще одна интересная функция: псевдо-класс local-link - псевдо-класс, который создает гиперссылки, в зависимости от местоположения посетителя вашего сайта на странице. Этот псевдо-класс также может различать внутренние и внешние ссылки. В нефункциональном использовании: local-link ссылается на элемент, у которого есть гиперссылка источника якоря, цель которой совпадает с адресом документа элемента. В функциональном использовании: local-link может быть в иерархической схеме следующим образом:

: local-link (0) - ссылается на ссылку с целью в том же домене : local-link (1) - ссылается на ссылку с тем же целевым началом и сегментом первого пути

: local-link (2) - ссылается на ссылку, целью которой является тот же источник, и первый и второй сегменты пути И так далее...

Псевдокласс :scope применяет стили только к тем элементам, которые входят в определенную ветвь DOM-дерева. Используется только совместно с тегом <style> в HTML5.

• Псевдоклассы, относящиеся ко времени

Временные псевдоклассы допускают классификацию элементов в определенные временные рамки, скажем, для речевого перевода документа или видео. Текущий псевдо-класс: для элемента или его предка, который активен на данный момент. Например, абзац, который будет прочитан вслух, будет выделен следующим образом: : current (span, a, dt, dd) { background: yellow;

}

Псевдокласс :past определяет момент времени до :current. А псевдокласс future, соответственно после :current.

• Псевдоклассы перетаскивания

Еще одна новая функция в селекторах уровня 4 - это: drop-псевдокласс, который применяется к тем элементам, которые определены как области на странице, указанной как «зоны отбрасывания», или, другими словами, слоты, на которых пользователь может удалить перетаскиваемый элемент , Функциональный :drop () псевдокласс просто выходит за рамки регулярной функции :drop для включения дополнительных фильтров:

: drop (active) - если пользователь поместит перетаскиваемый элемент над активированным элементом, то его можно туда «скинуть»;.

: drop (valid) - данный селектор выберет только области, которые допустимы для помещения переносимого объекта.

: drop (недействительно) - над элементом, помеченным данным псевдоклассом, не удастся поместить объект.

• Псевдоклассы структуры

Недавно добавленная функция для существующих структурных псевдоклассов :empty и :root - это :blank псевдокласс. Это похоже на: empty, за исключением того, что оно также относится к символам между элементами. Например, взгляните на следующее:

<Р>

</ Р>

Это будет считаться :blank, но не :empty из-за разрыва строки и других возможных разделов пробелов внутри.

• Селекторы отношений

Новый псевдокласс в Селекторах уровня 4 позволяет осуществлять привязку подключенных элементов с использованием E / FOO / F, тогда как один элемент имеет идентификатор, связанный с атрибутом FOO другого элемента. Это следует тем же правилам, что и для селекторов атрибутов. Пример, приведенный командой из W3C, включает выделение ввода, когда надпись наводится следующим образом:

label: matches (: hover,: focus) / for / input, / * ассоциация по атрибуту «for» * /

label: matches (: hover,: focus): not ([for]) input{/*ассоциация путем сдерживания*/

border: yellow 0 0 10px; }

• Выбор родительского элемента

CSS4 предлагает возможный выбор родителя с помощью div! > p, где элемент div является родительским элементом элемента p. При этом можно выбрать родительский элемент, когда на дочерний наведен курсор.

Например, в выпадающем меню, когда последний li был активным, родительский li всегда теряет фокус под CSS3. Однако, имея возможность настроить выбор на родителя, можно указать родительскому элементу определенный цвет, когда дочерний элемент li активен, как показано ниже.

ul! li: hover {

backgroun: #030303;

}

• Селекторы таблиц

Столбцы уже возможны в CSS3, но очень сложно выделить для стилизации. Это то, что сделает CSS4 - простой способ работы с отдельными столбцами. Первой большой особенностью является комбинатор столбцов «||», который позволяет выбирать столбец с указанным набором функций. N-й столбец (n) позволяет создавать заданные столбцы, начиная отсчет с начала. : Nth-last-column (n) начинает отсчет с конца. Оба: nth-column и: nth-last-column могут включать значения «odd» и «even», так что легко, например, сделать каждый нечетный столбец красным цветом.

Заключение

В CSS4 есть много очень интересных функций, и некоторые из них

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

Использованные источники:

1. Aizpurua, A., Harper, S., Vigo, M. Exploring the relationship between web accessibility and user experience (2016) International Journal of Human Computer Studies, 91, pp. 13-23.

2. Gapanyuk, Y., Lakomkin, E., Ionkin, S., Davtyan, M. MVC web framework based on eXist application server and XRX architecture (2011) CEUR Workshop Proceedings, 735, pp. 19-25

3. Kulakov, D.B., Semenov, S.E., Kulakov, B.B., Shcherbachev, P.V., Tarasov, O.I. Hydraulic Bipedal Robots Locomotion Mathematical Modeling (2015) Procedia Engineering, 106, pp. 62-70.

4. Sakulin, S., Alfimtsev, A., Solovyev, D., Sokolov, D. Web page interface optimization based on nature-inspired algorithms (2018) International Journal of Swarm Intelligence Research, 9 (2), pp. 28-46.

5. Mayorova, V.I. Concept of using innovative-educational university centers of space services as an innovation for space education (2012) Proceedings of the International Astronautical Congress, IAC, 12, pp. 10045-10049.

6. Sun, Q., Li, H., Campillo, J., (...), Wang, C., Zhang, Q. A Comprehensive Review of Smart Energy Meters in Intelligent Energy Networks (2016) IEEE Internet of Things Journal 3(4), pp.464-479

7. Shen, J., Wei, X., Kraposhin, V.S., Vekshin, B.S. High cold plastic deformation of die steel 4Kh5VF1S subjected to hardening and tempering (2012) Metal Science and Heat Treatment, 53 (9-10), pp. 503-504.

8. Zubkov, N.N., Polyakov, A.F., Shekhter, Yu.L. The hydraulic characteristics of porous materials for a system of transpiration cooling (2010) High Temperature, 48 (2), pp. 231-237

9. Moness, M., Moustafa, A.M. A Survey of Cyber-Physical Advances and Challenges of Wind Energy Conversion Systems: Prospects for Internet of Energy (2016) IEEE Internet of Things Journal 3(2), pp.134-145

10. Ocaya, R.O., Terblans, J.J. C-language package for standalone embedded atom method molecular dynamics simulations of fcc structures (2010) Softwarex 5, pp.227-233 Open Access

11. Xu, J., Luo, X., Wang, G., Gilmore, H., Madabhushi, A. A Deep Convolutional Neural Network for segmenting and classifying epithelial and stromal regions in histopathological images (2016) Neurocomputing 191, pp.214223

12. Jiao, Z., Gao, X., Wang, Y., Li, J. A deep feature based framework for breast masses classification (2016) Neurocomputing 197, pp.221-231

13. He, Y., Lei, J., Li, Y., Leung, C.H.C. A framework of query expansion for image retrieval based on knowledge base and concept similarity (2016) Neurocomputing 204, pp.26-32

14. Leng, B., Liu, Y., Yu, K., Zhang, X., Xiong, Z. 3D object understanding with

3D Convolutional Neural Networks (2016) Information Sciences 366, pp. 188-201

15. Xu, Y., Wang, H., Herrera, F. A distance-based framework to deal with ordinal and additive inconsistencies for fuzzy reciprocal preference relations (2016) Information Sciences 328, pp.189-205

16. Lu, Q., Zhou, W., Li, H. A no-reference Image sharpness metric based on structural information using sparse representation (2016) Information Sciences 369, pp.334-346

17. He, C., Hu, C., Zhang, W., Li, X. A parallel primal-dual splitting method for image restoration (2016) Information Sciences 358-359, pp.73-91

18. Vázquez de Parga, M., García, P., López, D A sufficient condition to polynomially compute a minimum separating DFA (2016) Information Sciences 370-371, pp.204-220

19. Park, C., Kim, D., Oh, J., Yu, H. Using user trust network to improve top-k recommendation (2016) Information Sciences 374, pp.1339-1351

20. Menahem, E., Schclar, A., Rokach, L., Elovici, Y. XML-AD: Detecting anomalous patterns in XML documents(2016) Information Sciences 326, pp.71-88

Published under license in Materials Science and Engineering by IOP Publishing Ltd.

Content from this work may be used under the terms of the Creative Commons Attribution 3.0 license. Any further distribution of this work must maintain attribution to the author(s) and the title of the work, journal citation and DOI.