# Internet-Filiale 6 (IF6) Prototype Changelog *Contributors:* Danilo Fickert, pitcom GmbH The format is based on [Keep a Changelog](https://keepachangelog.com/) and this project adheres to [Semantic Versioning](https://semver.org/). --- ## [2.2.0] - 2025-03-25 ### Added - Accessible focus outline styles. - Allow for main title `h1` styled like and then replacing an opener. - Client-side form validation with accessible error messages. - Heading style classes `.h1`, `.h2`, `.h3`, `.h4`, `.h5`, `.h6`. - Alternative (mostly empty) texts for CSS generated contents (mostly icons). - Disable opener autoplay via `.opener-pause` analogous `.slider-pause`. - Region label for sliders and opener `[data-slider|opener-label]`. ### Changed - Buttons CSS (rounded buttons) and color optimizations. - Moved tabs and breadcrumbs inside content due to new title-as-opener option. - Opener with `h2 + p.h3` for improved heading structure. - Teasers allow `h2 + p.h3` or `h3 + p.h4` for improved heading structure. - Logo wrapped in `h2` instead of `h1` for improved heading structure. - Improved heading structure in login, search, tabs, footer. - Reworked fixed tabs with `position: sticky` instead of JS. - Tabs CSS optimizations (thinner borders). - Table CSS optimizations (scoped to `.main`, removed `.fixed|scroll-*`, scrollable via `.table[tabindex="0"]` wrapper). - Replaced slick Slider 1.8.1 with accessible-slick Slider 1.0.1, optimizations and fixes. - Improved language links' [UX and a11y](https://www.htmhell.dev/adventcalendar/2023/4/#1-hreflang) adding `hreflang="xy"` and `aria-current="true"` attributes. - Allow for modern image formats in modals and case insensitive file extensions. - Updated Magnific Popup from 1.1.0 to 1.2.0. ### Removed - Conditional comment `[if lt IE 9 ]` with browser update hint. - Obsolete conditional comment that once prevented blocking the main stylesheet. - Obsolete `-moz-osx-font-smoothing: grayscale` (maps to `-webkit-font-smoothing: antialiased` in Firefox 128+). ### Fixed - Text alignment inside tables with a wrapper `figure`. - Minor optimizations and corrections. ## [2.1.2] - 2024-04-26 ### Fixed - Improved (keyboard) navigation for sidebar panels. - Slightly improved A11y and UX of form tooltips. - Refined color theming styles and custom properties. - Adjustments to `composer.json` file. - Minor optimizations and corrections. ## [2.1.1] - 2024-01-22 ### Fixed - Dark Mode corrections. - Minor optimizations and corrections. ## [2.1.0] - 2024-01-19 ### Added - Dark Mode (automatic based on system preference). - Class `.icon-x` as an alias for `.icon-twitter`. - Set `text-wrap: balance;` for heading levels 1 to 3. ### Changed - Color adjustments, closer to the real IF again. - Icons CSS optimizations and font file update (Twitter/X icon). - Tiles CSS optimizations (colors). - Updated the placeholder images API. ### Fixed - Minor optimizations and corrections. ## [2.0.0] - 2024-01-11 ### Added - Complete main navigation overhaul. - Flexible counter element. - Scroll initiated animations setup. - Boxless main content via `data-if6` option `content-boxes-off`. - Switched to `em` based media queries everywhere. - Allow modals from within opener. - Open links to `.mp4` videos in modals. - Namespaced all custom properties with `if6-`. - Modals CSS overhaul (light background, rounded corners). - Use `aria-current="page"` in breadcrumbs and main navigation. - CSS Smooth Scrolling via `scroll-behavior`. - Search CSS overhaul. ### Changed - Footer CSS (layout and light background). - Refined color theming styles and custom properties. - Updated the pitcom brand color. - Tabs CSS optimizations (multiple lines per tab, five tabs max). - Icons CSS optimizations and font file update. - Adapted for pitconsent banner 3.x. - Updated jQuery from 3.7.0 to 3.7.1. - Coding style updates. ### Removed - Header bar (on mobile) as part of main navigation overhaul. - All jQuery based scrolling in favor of CSS Smooth Scrolling. - Dropped support for IE11. ### Fixed - Replaced `h6` within `.breadcrumbs` and `.share` for a better heading structure. - Prepend modals to `.if6` not `body`. - Minor optimizations and corrections. ## [1.9.1] - 2023-06-20 ### Fixed - Removed CSS Smooth Scrolling again for now as it [conflicts](https://github.com/twbs/bootstrap/issues/35536) with jQuery's `.animate()` (in Chromium/WebKit browsers). - Scrolling/positioning issues with the tabs navigation. - The `iframe` demo needs form styles and scripts, but not the form HTML partial. ## [1.9.0] - 2023-06-16 ### Added - New red color, `#f00` becomes `#e00`. - Custom properties for easier color theming. - Dimmed backdrop when (mobile) navigation or sidebar panels are open. - Opener wide width option `.opener-caption-wide`. - Identify differing languages with a corresponding `lang="xy"` attribute for [better](https://accessibility.princeton.edu/how/content/identify-languages) accessibility. - Extended `@font-face` rules with `font-display` settings. - Added `width` and `height` attributes on all images. - `LICENSE.md` with licensing information. ### Changed - Updated all `.woff` font files (3), better kerning, massive icons overhaul, added new icon `.icon-podcast`. - Optimized skip link `.skip-to-top` behavior and performance (scroll event throttling). - Updated `radio` inputs to use CSS radial gradient instead of base64 encoded image. - Optimized and updated npm build scripts and tooling. - Updated jQuery from 3.5.1 to 3.7.0. - Updated iFrame Resizer from 4.2.11 to 4.3.6. - Updated the placeholder images API. - Moved meta `viewport` right after meta `charset` and before ``. - Coding style updates. ### Deprecated - Support for IE11. ### Removed - Document modes (`x-ua-compatible`) are considered deprecated and should no longer be used. - Dropped all `.ttf` font files. ### Fixed - Close languages dropdown when clicking elsewhere. - Better match actual *video* links (i.e. not channels) supported for YouTube and Vimeo modals. - Disabled skip link `.skip-to-top` when inside an `iframe`. - Flexbox stretch of narrow and unlinked vertically aligned images in IE11. - Print CSS. - Deprecated jQuery methods. - `ROOT_DIR` constant for root directory installs. - Minor optimizations and corrections. ### Security - Use the data reduced `youtube-nocookie.com` domain in YouTube modals. ## [1.8.0] - 2020-12-09 ### Added - Full-fledged Print CSS. - Services in the footer. - Allow icons on buttons and icon-only buttons. - Social sharing buttons. - Helper class `.icon-color` for colored (social media) icons on links, lists, icon boxes and tiles. - Extendable utility attribute `data-if6` with value options `print-urls-off`, `print-breadcrumbs-off` and `print-contact-off`. ### Changed - Use class `.vh` to visually hide content whenever possible. - Buttons CSS and color optimizations in header and footer. - Icons CSS optimizations. - Error CSS optimizations. - Updated the monospace font stack. ### Removed - Cookie banner styles (Matomo) from 1.6.0. - CSS Floats as a fallback for CSS Flexbox. - Buttons CSS for `<input type="submit">`, use the `<button>` element. ### Fixed - Added explicit attribute `type="button"` to relevant `<button>` elements. - Buttons CSS. - Minor optimizations and corrections. ## [1.7.0] - 2020-10-16 ### Added - Carousel mode `.slider-carousel` for sliders (centered and equal height images, prev/next slides visible). - Only open YouTube, Vimeo or Google Maps links as modals on explicit user consent via `__getPitConsent()`. - Open inline content modals on page load via fragment identifier. - Requires external CSS for pitconsent banner 2.x which is then adapted. ### Changed - Multiple modal galleries per page grouped by `.boxes` or `.box`. - Contact panel no longer required to be the first sidebar section. - Forms CSS optimizations. ### Deprecated - Cookie banner styles (Matomo) from 1.6.0. - All ID selectors in CSS. - CSS Floats as a fallback for CSS Flexbox. ### Fixed - Eliminated false positives of inline content modal links, hopefully. - Horizontal navigation background (via `box-shadow`) on iOS. - Wrong `ROOT_DIR` constant for subdirectory installs. - Minor optimizations and corrections. ## [1.6.1] - 2020-07-06 ### Added - Custom aspect ratios via inline custom properties on `.embed-container`. ### Changed - Updated icon font files, added new icons `.icon-exclamation-mark`, `.icon-linkedin`, `.icon-mail-bell`. - Updated the monospace font stack. - Updated jQuery from 3.4.1 to 3.5.1. - Updated iFrame Resizer from 4.1.1 to 4.2.11. - Coding style updates. ### Fixed - Flexbox stretch of narrow and unlinked vertically aligned images. - Minor optimizations and corrections. ## [1.6.0] - 2020-02-07 ### Added - Languages in the header. - Cookie banner styles (Matomo) in a new Miscellaneous CSS file. - Sections `#menu`, `#search` (and children), `#login`, `#frame`, `#modals`, `#update` and `#noscript` require a corresponding class. ### Changed - Header CSS (including login and search). - Forms CSS. - Coding style updates. ### Fixed - Minor optimizations and corrections. ## [1.5.0] - 2019-12-06 ### Added - Accordion. - Service tiles. - Awards in the footer. - Call To Action (and buttons centered outside boxes). - Lists for links (`.links`), downloads (`.downloads`) and individual icons (`.icons|-…`). - Skip link `.skip-to-top`. - Icons (w/o corresponding `.icon-` class) via `data-icon` attribute. - Sections `#header`, `#main`, `#footer`, `#tabs`, `#breadcrumbs`, `#content` and `#sidebar` require a corresponding class. - Sidebar sections require a class `.panel`, `#contact` an additional class `.panel-contact`. - `UPGRADE.md` with information about breaking changes. - Overscroll behavior containment. - Auto-hiding scrollbars (Microsoft extension) when the content of an element overflows. ### Changed - Default font size `16px` even on desktops, many optimizations and corrections. - Reworked global overflow (on `html`, `body` and `.if6`) to allow for `position: sticky`, eventually. - Lighter default text and link color `#333` (was `#000`). - Lower basic anchor styles specificity. - Margins of headings. - Footer HTML and CSS for handling different background colors. - Better support for some default elements (forms, lists, etc.) in sidebar panels. - Removed the matchHeight script in favor of Flexbox' stretch. - Tabs CSS. - Buttons CSS. - Added a wrapper for the teaser image. - Opener arrows take full width. - Growing menubar items left border (gap) on hover/focus. - Use `tel:` anchors also for fax numbers to prevent Edge from auto styling. - Typographical and color corrections. - Updated icon font files. - CSS transitions optimizations. - CSS minification optimization level 2. - Updated Normalize.css from 7.0.0 to 8.0.1. - Updated jQuery from 3.2.1 to 3.4.1. - Updated slick Slider from 1.6.0 to 1.8.1. - Updated iFrame Resizer from 3.5.5 to 4.1.1. - Coding style updates. ### Removed - Dropped support for IE10−. - Removed HTML5 Placeholder jQuery plugin. - Dropped all `.eot` font files. - Sparkasse Light (SparLt) font files (3). - Vendor prefixes `-o-transition` and `-ms-transform`. ### Fixed - Horizontal desktop navigation on touch devices (2nd click). - Contact panel icon lists in Chrome. - Button colors on inverse and transparent opener captions. - Set `fixedContentPos: false` for Magnific Popup (hidden scrollbars caused issues). - Modal galleries showed previous/next items' caption on items without a caption, see [Github Issue](https://github.com/dimsemenov/Magnific-Popup/issues/903). - Tabs scroll script highlighted final tab even when final section out of viewport. - Focus the target after tabs scroll. - Minor optimizations and corrections. ## [1.4.4] - 2018-07-20 ### Added - Styles for responsively embedding content via `.embed-container`. ### Fixed - Collapsed opener captions in IE11− due to `calc()` within `max-height`. - Always require the `<main>` wrapper, set a `min-height` to safely show all the horizontal desktop navigation. - Buttons alignment in `.opener-caption-c` and `.opener-caption-r`. - Growing menubar items left border (gap) on hover/focus. - Pagination for TYPO3 News plugin. - Properly removed unneeded pseudo elements. - Tabs fixation without opener. - List style optimizations. - Back button/submit styles. ## [1.4.3] - 2017-11-08 ### Fixed - Disable automatic URLs rebasing in the CSS build processes via `--skip-rebase`. - Opener caption touch scrolling on iOS devices. - Font smoothing in Safari on OS X. ## [1.4.2] - 2017-11-07 ### Fixed - Invisible `.opener-caption-fade-in` without JavaScript or in single item opener. - Blue flicker in menubar in Safari on OS X. ## [1.4.1] - 2017-11-06 ### Fixed - The `default` demo should have all partials, no matter what each view actually requires. - The `default` distribution scripts missed the `iframeResizer.contentWindow.min.js` helper. - Opener CSS. - Slider dots navigation in equal height boxes. - Font smoothing in Safari on OS X. - Jumpy menubar in Safari on OS X. ## [1.4.0] - 2017-11-03 ### Added - Opener figcaption default fully centered, figcaption position `.opener-caption-n|ne|e|se|s|sw|w|nw` (compass). - Opener figcaption text default left-aligned, `.opener-caption-l|c|r`. - Transparent opener figcaption `.opener-caption-transparent`. - Opener figcaption fade-in transition `.opener-caption-fade-in`. - A modal showing all available icons, accessible through the default demo's `content.php`. - Use `npm` as build tool (`npm run build`), added `package.json` file. ### Changed - All opener CSS uses class selectors. - Opener figcaption div classes `.opener-caption` etc. - Inverse opener figcaption `.opener-caption-inverse`. - Moved breadcrumbs separator from link to list item. - Updated icon font files, added new icons `.icon-at`, `.icon-hand-in-hand`, `.icon-handshake`, `.icon-inflation`, `.icon-instagram`, `.icon-kwitt`, `.icon-manni`, `.icon-pay-contactless`, `.icon-pyramid-finance`, `.icon-save-donate`, `.icon-snapchat`. - Footer content (added resources). - Reworked `CHANGELOG.md` to adhere to the [Keep a Changelog](http://keepachangelog.com/) format. - Updated Normalize.css from 5.0.0 to 7.0.0. - Updated matchHeight from 0.7.0 to 0.7.2. - Updated jQuery from 3.1.1 to 3.2.1. - Hyphenation optimizations. ### Deprecated - Writing less specific CSS using classes is recommended, removing ID selectors step by step. ### Removed - All ID selectors in opener CSS. - Opener figure inverse `.inverse`. - Opener figcaption div class `.figcaption`. - Hyphenation vendor prefix `-moz-hyphens`. ### Fixed - Loading of fonts assets when `false === DEBUG`. - Clicking through on the edges of the horizontal desktop navigation. - Centering of slider images. - Slider dots navigation for 10+ items and positioning. - Error CSS. - Button colors in inverted elements. - Minor optimizations and corrections. ## [1.3.1] - 2017-02-08 ### Fixed - Minor optimizations and corrections. ## [1.3.0] - 2017-02-07 ### Added - New opener CSS (white with buttons), mixable options: `.inverse`, fully linked, not linked. - Corresponding classes on elements with id's for less specific CSS in the future. - Constant `DEBUG` to switch between modular source files (CSS, JS) and the default production code (concatenated, minified files). ### Changed - Opener horizontal centering optimizations, allow `iframe` slides. - Opener figcaptions vertically centered. - Opener arrows CSS, modal arrows CSS. - Moved buttons CSS from `_content.css` to `_main.css`. - Color contrast, `#777` becomes `#666`. - Updated icon font files, added new icons `.icon-blog`, `.icon-whatsapp`, `.icon-wikipedia`. - Updated Normalize.css from 4.2.0 to 5.0.0, corrections. - Updated jQuery from 3.1.0 to 3.1.1. ### Fixed - `radio` and `checkbox` inputs on iOS. - Cloned slider elements `.slick-cloned` appeared in gallery modals. ## [1.2.1] - 2016-08-26 ### Changed - All icon classes available for social media links in the footer. - Moved icons CSS from `_main.css` to separate `_icons.css`. ## [1.2.0] - 2016-08-11 ### Added - Horizontal desktop navigation `_menubar.css` (1025px and up). - Sparkasse Bold (SparBd) font files (3). - `<hr>` before contact sidebar. ### Changed - Updated all font files, removed old/added new icons. - CSS for `radio` and `checkbox` inputs via `label::before`, JavaScript fallback. - Header contents take full width. - Table CSS, class `.fixed` for `table-layout: fixed;`, less prominent numbering. - Opener CSS. - Updated Normalize.css from 3.0.3 to 4.2.0, corrections. - Updated jQuery from 2.1.4 to 3.1.0. - Updated Magnific Popup from 1.0.0 to 1.1.0. - Updated slick Slider from 1.5.0 to 1.6.0. - Updated matchHeight to 0.7.0. - Updated iFrame Resizer from 2.8.10 to 3.5.5. - Updated HTML5 Placeholder jQuery plugin from 2.1.2 to 2.3.1. ### Removed - Vendor prefixes for `box-sizing` and `box-shadow`. - `min-width` from form labels. ### Fixed - Menu/contact closed when element's margins inside menu/contact were clicked (`.stopPropagation()` does not work on element's margins). - `<select>` elements with very long `<option>` breaking layout. - matchHeight [problem](https://github.com/liabru/jquery-match-height/issues/88) with floating elements inside. - `.prop()` does not trigger change event (on radios/checkboxes). ## [1.1.1] - 2015-10-07 ### Fixed - Vertical aligned `<figure>` elements. ## [1.1.0] - 2015-10-07 ### Added - [Normalize.css](https://necolas.github.io/normalize.css/) 3.0.3 by Nicolas Gallagher `normalize.css`. - Project info to the footer. - base64 encoded loading image. ### Changed - Breadcrumbs with `ol` according to [schema.org](https://schema.org/BreadcrumbList). - Pagination with first/last/all page buttons and Flexbox styles. - Use CSS icon classes for sidebar label flaps. - Table CSS, standard block, optional scrolling. - Print CSS. ### Removed - `@version` from PHP doc blocks. - Eric Meyer's Reset CSS `_reset.css`. - `loading.gif`. ### Fixed - Corrections after switch to `normalize.css`. - Icon styles cross browser inconsistencies. - jQuery 2.1.4 update was missing in distribution files. - `apple-touch-icon.png` needs absolute path. ## [1.0.0] - 2015-09-25 ### Added - Initial release. --- ## Copyright **pitcom GmbH** Bahnhofstraße 61 08523 Plauen [www.pitcom.de](https://www.pitcom.de/) © 2015 – 2025 pitcom GmbH