James Peris 2: The Fountain of Eternal Drunkenness
1. HTML (1991–1993) <html> <head> <title> </title> </head> <body> </body> <h1>–<h6> <p> <a> <br> <hr> <pre> <img> 2. HTTP и браузеры <a href="…" > 3. Формы HTML (HTML 2.0, 1995) <form> <input> <textarea> <button> <select> <option> <label> <fieldset> <legend> 4. Таблицы (HTML 3.2, 1997) <table> <tr> <td> <th> <caption> <col> <colgroup> 5. CSS (1996–1997) нет новых тегов, но существовали <font> <center> <b> <i> 6. JavaScript (1995) <script> 7. HTML 4 / XHTML (1997–2000) <div> <span> <strong> <em> <ul> <ol> <li> <blockquote> <cite> <abbr> <acronym> <img> <object> <embed> <iframe> <link> <meta> <style> <script> <noscript> 8. HTML5 (2014) <header> <footer> <nav> <article> <section> <aside> <figure> <figcaption> <main> <mark> <time> <progress> <meter> <canvas> <video> <audio> <source> <track> <output> <details> <summary> <dialog> 9. Современные вспомогательные и семантические <template> <slot> <picture> <map> <area> <menu> <menuitem> <bdi> <bdo> <wbr> <data>
1. 1995 — Появление JavaScript - Разработан Бренданом Эйхом в Netscape - Первоначальное название: Mocha → LiveScript → JavaScript - Поддержка в браузере Netscape Navigator 2 - Теги: <script> 2. 1996 — Первый стандарт - JavaScript 1.1 в Netscape, JScript 1.0 в IE - Появление условных операторов, циклов, функций 3. 1997 — ECMAScript 1 - Первый официально стандартизированный стандарт ECMA-262 - Основы синтаксиса и типов данных 4. 1998 — ECMAScript 2 - Небольшие исправления стандарта 5. 1999 — ECMAScript 3 - Полезные новшества: try/catch, регулярные выражения, улучшенные строки и массивы - Широкая поддержка браузерами 6. 2000–2005 — Активное расширение - AJAX (Asynchronous JavaScript and XML) - Динамическое обновление страниц без перезагрузки - Популяризация JavaScript в веб-приложениях 7. 2005 — jQuery и DOM библиотеки - jQuery упрощает работу с DOM, событиями, анимациями - Начало массового использования JS в интерактивных сайтах 8. 2009 — ECMAScript 5 - «use strict», методы массивов (forEach, map, filter), JSON встроенно 9. 2015 — ECMAScript 6 / ES2015 - let/const, стрелочные функции, классы, модули, шаблонные строки, деструктуризация 10. 2016–2023 — ES2016+ и современный JavaScript - Async/await (ES2017) - Spread/rest, Promise, Map/Set, WeakMap, WeakSet - Optional chaining, nullish coalescing (ES2020) - Современные фреймворки: React, Vue, Angular, Svelte - Node.js и серверная JS среда - TypeScript как надстройка над JS1. CSS
1 1996 - первый стандарт w3c - базовые стили текста font-family font-size font-style font-weight font-variant line-height text-align text-decoration text-indent text-transform letter-spacing word-spacing white-space - цвета и фоны color background-color background-image background-repeat background-attachment background-position - отступы и блоки margin padding border border-width border-style border-color width height float clear - простые селекторы tag p h1 div класс .class id #id потомок div p группировка h1 h2 h3 псевдоклассы a:link a:visited a:hover a:active - без адаптивности 2. CSS 2 1998 - позиционирование absolute relative fixed position top right bottom left - z-index - media types print screen @media - псевдоэлементы before after first-line first-letter - табличная модель border-collapse border-spacing caption-side empty-cells table-layout - реализация браузерами нестабильная 3. CSS 2.1 2011 - стабилизация css2 - очистка от неподдерживаемых частей - нормализация box model - долгое время база верстки 4. CSS3 эпоха модулей 2009–2015 - css разделён на независимые модули - массовое расширение возможностей - ключевые нововведения: - border-radius - box-shadow - text-shadow - gradients - rgba hsla - @font-face - media queries адаптив - multiple backgrounds - transforms 2d - transitions - animations keyframes - flexbox ранний 5. Flexbox финализация 2017 - единая модель выравнивания - простое вертикальное центрирование - удобные гибкие контейнеры - широкая поддержка браузерами 6. CSS Grid 2017 - двумерная система сеток - управление строками и колонками - замена float и table-layout - точное позиционирование элементов 7. Современный CSS 2019–2025 - css превращается в мощную систему лэйаута и логики - ключевые возможности: - custom properties var() - calc clamp min max - aspect-ratio - object-fit - scroll-snap - backdrop-filter - container queries - subgrid - :is :where :has - logical properties - native nesting 2023+ - color-mix - цветовые пространства lab lch oklab 8. Общий тренд - меньше зависимость от js - больше нативной адаптивности - больше вычислений внутри css - css приближается к декларативному языку программирования