├── .gitignore
├── .vscode
├── extensions.json
└── launch.json
├── CONTRIBUTING
├── LICENSE
├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
├── public
├── authors
│ ├── argyle.jpg
│ ├── barry.jpg
│ ├── bramus.jpg
│ ├── rachel.jpg
│ └── una.jpg
├── baseline-status.min.js
├── biomes
│ ├── arctic.png
│ ├── arctic.svg
│ ├── cyberspace-header.png
│ ├── cyberspace-sidebar.png
│ ├── cyberspace.png
│ ├── cyberspace.svg
│ ├── desert.png
│ ├── desert.svg
│ ├── jungle.png
│ └── jungle.svg
├── cactus.svg
├── favicon.svg
├── fight.otf
├── fight.woff2
├── hero-video-poster.jpg
├── images
│ ├── ruby-align.png
│ ├── ruby_after.png
│ └── ruby_before.png
├── social.png
├── track-grunge.svg
└── video
│ ├── anchoring.mp4
│ ├── anchoring.png
│ ├── animate-to-auto.mp4
│ ├── animated-details-accordion.mp4
│ ├── animated-details-horizontal.mp4
│ ├── cross-document-view-transitions.mp4
│ ├── cross-document-view-transitions.png
│ ├── field-sizing.mp4
│ ├── field-sizing.png
│ ├── line-clamp-auto.mp4
│ ├── line-clamp-number.mp4
│ ├── line-clamp-transition.mp4
│ ├── paint-order.mp4
│ ├── paint-order.png
│ ├── scrollbar-color.mp4
│ ├── snap-change.mp4
│ ├── snap-change.png
│ ├── snap-changing.mp4
│ └── snap-changing.png
├── src
├── components
│ ├── author.astro
│ ├── authors.astro
│ ├── biome.astro
│ ├── biomes.astro
│ ├── codepen.astro
│ ├── cookieconsent.astro
│ ├── feature.filmstrip.astro
│ ├── feature.title.astro
│ ├── footer.astro
│ ├── hero.astro
│ ├── intro.astro
│ ├── nav.aside.astro
│ ├── nav.bento.astro
│ ├── nav.primary.astro
│ ├── theme.switch.astro
│ ├── video.astro
│ └── youtube.astro
├── data
│ └── authors.json
├── env.d.ts
├── features
│ ├── _layout.astro
│ ├── components
│ │ ├── anchor-positioning.astro
│ │ ├── animate-to-height-auto.astro
│ │ ├── exclusive-details.astro
│ │ ├── field-sizing.astro
│ │ └── styleable-details.astro
│ ├── developerexperience
│ │ ├── at-property.astro
│ │ ├── backdrop-inheritance.astro
│ │ ├── cssom-nested-declarations.astro
│ │ ├── light-dark.astro
│ │ ├── paint-order.astro
│ │ ├── popover.astro
│ │ ├── ruby-align.astro
│ │ └── starting-style.astro
│ └── interactions
│ │ ├── scroll-driven-animations.astro
│ │ ├── scroll-snap-events.astro
│ │ ├── scrollbar-styling.astro
│ │ └── view-transitions-mpa.astro
├── icons
│ ├── book.svg
│ ├── check.svg
│ ├── chrome.svg
│ ├── close.svg
│ ├── css.svg
│ ├── dino.svg
│ ├── down-arrow.svg
│ ├── feedback.svg
│ ├── github.svg
│ ├── hamburger.svg
│ ├── home.svg
│ ├── play.svg
│ └── star.svg
├── pages
│ └── index.astro
├── styles
│ ├── code.css
│ ├── global.css
│ └── utilities.css
└── util
│ ├── shuffle.ts
│ └── slugify.ts
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # build output
2 | dist/
3 | # generated types
4 | .astro/
5 |
6 | # dependencies
7 | node_modules/
8 |
9 | # logs
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 |
15 |
16 | # environment variables
17 | .env
18 | .env.production
19 |
20 | # macOS-specific files
21 | .DS_Store
22 |
23 | # jetbrains setting folder
24 | .idea/
25 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["astro-build.astro-vscode"],
3 | "unwantedRecommendations": []
4 | }
5 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "command": "./node_modules/.bin/astro dev",
6 | "name": "Development server",
7 | "request": "launch",
8 | "type": "node-terminal"
9 | }
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/CONTRIBUTING:
--------------------------------------------------------------------------------
1 | # How to contribute
2 |
3 | We'd love to accept your patches and contributions to this project.
4 |
5 | ## Before you begin
6 |
7 | ### Sign our Contributor License Agreement
8 |
9 | Contributions to this project must be accompanied by a
10 | [Contributor License Agreement](https://cla.developers.google.com/about) (CLA).
11 | You (or your employer) retain the copyright to your contribution; this simply
12 | gives us permission to use and redistribute your contributions as part of the
13 | project.
14 |
15 | If you or your current employer have already signed the Google CLA (even if it
16 | was for a different project), you probably don't need to do it again.
17 |
18 | Visit to see your current agreements or to
19 | sign a new one.
20 |
21 | ### Review our community guidelines
22 |
23 | This project follows
24 | [Google's Open Source Community Guidelines](https://opensource.google/conduct/).
25 |
26 | ## Contribution process
27 |
28 | ### Code reviews
29 |
30 | All submissions, including submissions by project members, require review. We
31 | use GitHub pull requests for this purpose. Consult
32 | [GitHub Help](https://help.github.com/articles/about-pull-requests/) for more
33 | information on using pull requests.
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 |
2 | Apache License
3 | Version 2.0, January 2004
4 | http://www.apache.org/licenses/
5 |
6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
7 |
8 | 1. Definitions.
9 |
10 | "License" shall mean the terms and conditions for use, reproduction,
11 | and distribution as defined by Sections 1 through 9 of this document.
12 |
13 | "Licensor" shall mean the copyright owner or entity authorized by
14 | the copyright owner that is granting the License.
15 |
16 | "Legal Entity" shall mean the union of the acting entity and all
17 | other entities that control, are controlled by, or are under common
18 | control with that entity. For the purposes of this definition,
19 | "control" means (i) the power, direct or indirect, to cause the
20 | direction or management of such entity, whether by contract or
21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
22 | outstanding shares, or (iii) beneficial ownership of such entity.
23 |
24 | "You" (or "Your") shall mean an individual or Legal Entity
25 | exercising permissions granted by this License.
26 |
27 | "Source" form shall mean the preferred form for making modifications,
28 | including but not limited to software source code, documentation
29 | source, and configuration files.
30 |
31 | "Object" form shall mean any form resulting from mechanical
32 | transformation or translation of a Source form, including but
33 | not limited to compiled object code, generated documentation,
34 | and conversions to other media types.
35 |
36 | "Work" shall mean the work of authorship, whether in Source or
37 | Object form, made available under the License, as indicated by a
38 | copyright notice that is included in or attached to the work
39 | (an example is provided in the Appendix below).
40 |
41 | "Derivative Works" shall mean any work, whether in Source or Object
42 | form, that is based on (or derived from) the Work and for which the
43 | editorial revisions, annotations, elaborations, or other modifications
44 | represent, as a whole, an original work of authorship. For the purposes
45 | of this License, Derivative Works shall not include works that remain
46 | separable from, or merely link (or bind by name) to the interfaces of,
47 | the Work and Derivative Works thereof.
48 |
49 | "Contribution" shall mean any work of authorship, including
50 | the original version of the Work and any modifications or additions
51 | to that Work or Derivative Works thereof, that is intentionally
52 | submitted to Licensor for inclusion in the Work by the copyright owner
53 | or by an individual or Legal Entity authorized to submit on behalf of
54 | the copyright owner. For the purposes of this definition, "submitted"
55 | means any form of electronic, verbal, or written communication sent
56 | to the Licensor or its representatives, including but not limited to
57 | communication on electronic mailing lists, source code control systems,
58 | and issue tracking systems that are managed by, or on behalf of, the
59 | Licensor for the purpose of discussing and improving the Work, but
60 | excluding communication that is conspicuously marked or otherwise
61 | designated in writing by the copyright owner as "Not a Contribution."
62 |
63 | "Contributor" shall mean Licensor and any individual or Legal Entity
64 | on behalf of whom a Contribution has been received by Licensor and
65 | subsequently incorporated within the Work.
66 |
67 | 2. Grant of Copyright License. Subject to the terms and conditions of
68 | this License, each Contributor hereby grants to You a perpetual,
69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
70 | copyright license to reproduce, prepare Derivative Works of,
71 | publicly display, publicly perform, sublicense, and distribute the
72 | Work and such Derivative Works in Source or Object form.
73 |
74 | 3. Grant of Patent License. Subject to the terms and conditions of
75 | this License, each Contributor hereby grants to You a perpetual,
76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
77 | (except as stated in this section) patent license to make, have made,
78 | use, offer to sell, sell, import, and otherwise transfer the Work,
79 | where such license applies only to those patent claims licensable
80 | by such Contributor that are necessarily infringed by their
81 | Contribution(s) alone or by combination of their Contribution(s)
82 | with the Work to which such Contribution(s) was submitted. If You
83 | institute patent litigation against any entity (including a
84 | cross-claim or counterclaim in a lawsuit) alleging that the Work
85 | or a Contribution incorporated within the Work constitutes direct
86 | or contributory patent infringement, then any patent licenses
87 | granted to You under this License for that Work shall terminate
88 | as of the date such litigation is filed.
89 |
90 | 4. Redistribution. You may reproduce and distribute copies of the
91 | Work or Derivative Works thereof in any medium, with or without
92 | modifications, and in Source or Object form, provided that You
93 | meet the following conditions:
94 |
95 | (a) You must give any other recipients of the Work or
96 | Derivative Works a copy of this License; and
97 |
98 | (b) You must cause any modified files to carry prominent notices
99 | stating that You changed the files; and
100 |
101 | (c) You must retain, in the Source form of any Derivative Works
102 | that You distribute, all copyright, patent, trademark, and
103 | attribution notices from the Source form of the Work,
104 | excluding those notices that do not pertain to any part of
105 | the Derivative Works; and
106 |
107 | (d) If the Work includes a "NOTICE" text file as part of its
108 | distribution, then any Derivative Works that You distribute must
109 | include a readable copy of the attribution notices contained
110 | within such NOTICE file, excluding those notices that do not
111 | pertain to any part of the Derivative Works, in at least one
112 | of the following places: within a NOTICE text file distributed
113 | as part of the Derivative Works; within the Source form or
114 | documentation, if provided along with the Derivative Works; or,
115 | within a display generated by the Derivative Works, if and
116 | wherever such third-party notices normally appear. The contents
117 | of the NOTICE file are for informational purposes only and
118 | do not modify the License. You may add Your own attribution
119 | notices within Derivative Works that You distribute, alongside
120 | or as an addendum to the NOTICE text from the Work, provided
121 | that such additional attribution notices cannot be construed
122 | as modifying the License.
123 |
124 | You may add Your own copyright statement to Your modifications and
125 | may provide additional or different license terms and conditions
126 | for use, reproduction, or distribution of Your modifications, or
127 | for any such Derivative Works as a whole, provided Your use,
128 | reproduction, and distribution of the Work otherwise complies with
129 | the conditions stated in this License.
130 |
131 | 5. Submission of Contributions. Unless You explicitly state otherwise,
132 | any Contribution intentionally submitted for inclusion in the Work
133 | by You to the Licensor shall be under the terms and conditions of
134 | this License, without any additional terms or conditions.
135 | Notwithstanding the above, nothing herein shall supersede or modify
136 | the terms of any separate license agreement you may have executed
137 | with Licensor regarding such Contributions.
138 |
139 | 6. Trademarks. This License does not grant permission to use the trade
140 | names, trademarks, service marks, or product names of the Licensor,
141 | except as required for reasonable and customary use in describing the
142 | origin of the Work and reproducing the content of the NOTICE file.
143 |
144 | 7. Disclaimer of Warranty. Unless required by applicable law or
145 | agreed to in writing, Licensor provides the Work (and each
146 | Contributor provides its Contributions) on an "AS IS" BASIS,
147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148 | implied, including, without limitation, any warranties or conditions
149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150 | PARTICULAR PURPOSE. You are solely responsible for determining the
151 | appropriateness of using or redistributing the Work and assume any
152 | risks associated with Your exercise of permissions under this License.
153 |
154 | 8. Limitation of Liability. In no event and under no legal theory,
155 | whether in tort (including negligence), contract, or otherwise,
156 | unless required by applicable law (such as deliberate and grossly
157 | negligent acts) or agreed to in writing, shall any Contributor be
158 | liable to You for damages, including any direct, indirect, special,
159 | incidental, or consequential damages of any character arising as a
160 | result of this License or out of the use or inability to use the
161 | Work (including but not limited to damages for loss of goodwill,
162 | work stoppage, computer failure or malfunction, or any and all
163 | other commercial damages or losses), even if such Contributor
164 | has been advised of the possibility of such damages.
165 |
166 | 9. Accepting Warranty or Additional Liability. While redistributing
167 | the Work or Derivative Works thereof, You may choose to offer,
168 | and charge a fee for, acceptance of support, warranty, indemnity,
169 | or other liability obligations and/or rights consistent with this
170 | License. However, in accepting such obligations, You may act only
171 | on Your own behalf and on Your sole responsibility, not on behalf
172 | of any other Contributor, and only if You agree to indemnify,
173 | defend, and hold each Contributor harmless for any liability
174 | incurred by, or claims asserted against, such Contributor by reason
175 | of your accepting any such warranty or additional liability.
176 |
177 | END OF TERMS AND CONDITIONS
178 |
179 | APPENDIX: How to apply the Apache License to your work.
180 |
181 | To apply the Apache License to your work, attach the following
182 | boilerplate notice, with the fields enclosed by brackets "[]"
183 | replaced with your own identifying information. (Don't include
184 | the brackets!) The text should be enclosed in the appropriate
185 | comment syntax for the file format. We also recommend that a
186 | file or class name and description of purpose be included on the
187 | same "printed page" as the copyright notice for easier
188 | identification within third-party archives.
189 |
190 | Copyright [yyyy] [name of copyright owner]
191 |
192 | Licensed under the Apache License, Version 2.0 (the "License");
193 | you may not use this file except in compliance with the License.
194 | You may obtain a copy of the License at
195 |
196 | http://www.apache.org/licenses/LICENSE-2.0
197 |
198 | Unless required by applicable law or agreed to in writing, software
199 | distributed under the License is distributed on an "AS IS" BASIS,
200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201 | See the License for the specific language governing permissions and
202 | limitations under the License.
203 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSS Wrapped 2024
2 |
3 | Source code for CSS Wrapped 2024 – https://chrome.dev/css-wrapped-2024/
4 |
5 | ## Development
6 |
7 | Spin up with `npm start`
8 |
9 | ## Deploying to production
10 |
11 | To deploy, invoke `npm run deploy`.
12 |
13 | This will build the project to `./dist` with the `--base` flag set to `css-wrapped-2024`, and then upload the files to the `chrome-dev-demos` bucket.
14 |
15 | Only Googlers with sufficient permissions can deploy to `chrome.dev`. Make sure you are authenticated with `gcloud auth login`.
16 |
17 | ## License
18 |
19 | This project is released under the Apache 2.0 License. See the enclosed [`LICENSE`](./LICENSE) for details.
20 |
21 | ## Contributing
22 |
23 | We'd love to accept your patches and contributions to this project. See the enclosed [`CONTRIBUTING`](./CONTRIBUTING) for details.
--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2024 Google LLC
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | import { defineConfig } from "astro/config";
7 | import { fileURLToPath, URL } from 'node:url';
8 | import icon from "astro-icon";
9 |
10 | export default defineConfig({
11 | devToolbar: {
12 | enabled: false
13 | },
14 | integrations: [icon()],
15 | vite: {
16 | resolve: {
17 | alias: {
18 | '@public': fileURLToPath(new URL('./public', import.meta.url)),
19 | }
20 | }
21 | }
22 | });
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "css-wrapped-2024",
3 | "type": "module",
4 | "version": "0.0.1",
5 | "scripts": {
6 | "dev": "astro dev",
7 | "start": "astro dev",
8 | "build": "astro check && astro build",
9 | "preview": "astro preview",
10 | "astro": "astro",
11 | "deploy": "gsutil -m rsync -rd dist gs://chrome-dev-demos/public/css-wrapped-2024",
12 | "predeploy": "astro check && astro build --base css-wrapped-2024"
13 | },
14 | "license": "Apache-2.0",
15 | "dependencies": {
16 | "@astrojs/check": "^0.9.4",
17 | "astro": "^4.16.15",
18 | "astro-icon": "^1.1.4",
19 | "lite-youtube-embed": "^0.3.3",
20 | "open-props": "^1.7.8",
21 | "typescript": "^5.7.2"
22 | }
23 | }
--------------------------------------------------------------------------------
/public/authors/argyle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/authors/argyle.jpg
--------------------------------------------------------------------------------
/public/authors/barry.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/authors/barry.jpg
--------------------------------------------------------------------------------
/public/authors/bramus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/authors/bramus.jpg
--------------------------------------------------------------------------------
/public/authors/rachel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/authors/rachel.jpg
--------------------------------------------------------------------------------
/public/authors/una.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/authors/una.jpg
--------------------------------------------------------------------------------
/public/biomes/arctic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/biomes/arctic.png
--------------------------------------------------------------------------------
/public/biomes/cyberspace-header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/biomes/cyberspace-header.png
--------------------------------------------------------------------------------
/public/biomes/cyberspace-sidebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/biomes/cyberspace-sidebar.png
--------------------------------------------------------------------------------
/public/biomes/cyberspace.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/biomes/cyberspace.png
--------------------------------------------------------------------------------
/public/biomes/desert.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/biomes/desert.png
--------------------------------------------------------------------------------
/public/biomes/jungle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/biomes/jungle.png
--------------------------------------------------------------------------------
/public/cactus.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/fight.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/fight.otf
--------------------------------------------------------------------------------
/public/fight.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/fight.woff2
--------------------------------------------------------------------------------
/public/hero-video-poster.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/hero-video-poster.jpg
--------------------------------------------------------------------------------
/public/images/ruby-align.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/images/ruby-align.png
--------------------------------------------------------------------------------
/public/images/ruby_after.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/images/ruby_after.png
--------------------------------------------------------------------------------
/public/images/ruby_before.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/images/ruby_before.png
--------------------------------------------------------------------------------
/public/social.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/social.png
--------------------------------------------------------------------------------
/public/track-grunge.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/public/video/anchoring.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/anchoring.mp4
--------------------------------------------------------------------------------
/public/video/anchoring.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/anchoring.png
--------------------------------------------------------------------------------
/public/video/animate-to-auto.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/animate-to-auto.mp4
--------------------------------------------------------------------------------
/public/video/animated-details-accordion.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/animated-details-accordion.mp4
--------------------------------------------------------------------------------
/public/video/animated-details-horizontal.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/animated-details-horizontal.mp4
--------------------------------------------------------------------------------
/public/video/cross-document-view-transitions.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/cross-document-view-transitions.mp4
--------------------------------------------------------------------------------
/public/video/cross-document-view-transitions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/cross-document-view-transitions.png
--------------------------------------------------------------------------------
/public/video/field-sizing.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/field-sizing.mp4
--------------------------------------------------------------------------------
/public/video/field-sizing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/field-sizing.png
--------------------------------------------------------------------------------
/public/video/line-clamp-auto.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/line-clamp-auto.mp4
--------------------------------------------------------------------------------
/public/video/line-clamp-number.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/line-clamp-number.mp4
--------------------------------------------------------------------------------
/public/video/line-clamp-transition.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/line-clamp-transition.mp4
--------------------------------------------------------------------------------
/public/video/paint-order.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/paint-order.mp4
--------------------------------------------------------------------------------
/public/video/paint-order.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/paint-order.png
--------------------------------------------------------------------------------
/public/video/scrollbar-color.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/scrollbar-color.mp4
--------------------------------------------------------------------------------
/public/video/snap-change.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/snap-change.mp4
--------------------------------------------------------------------------------
/public/video/snap-change.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/snap-change.png
--------------------------------------------------------------------------------
/public/video/snap-changing.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/snap-changing.mp4
--------------------------------------------------------------------------------
/public/video/snap-changing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/css-wrapped-2024/ce996350d757a7e9372e4d25b35a7482af07194c/public/video/snap-changing.png
--------------------------------------------------------------------------------
/src/components/author.astro:
--------------------------------------------------------------------------------
1 | ---
2 | interface Props {
3 | name: string;
4 | }
5 |
6 | import authors from './../data/authors.json';
7 |
8 | const { name } = Astro.props;
9 | const author = authors[name];
10 | ---
11 |
12 |
41 | {/* if changing the Video, then update the preload of the image in index.astro */}
42 |
43 |
44 |
45 |
46 |
47 | Chrome and CSS in 2024 journeyed
48 | through the forest, over the mountains, and across the seas…
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the latest CSS launched for Chrome and the web platform in 2024, highlighting {totalFeatures} new features
7 | 2024 has been another amazing year for CSS!
8 |
9 |
10 |
11 | Cross-document view transitions and scroll-driven animations let you add
12 | more interactivity to your applications with a few lines of CSS. You can now
13 | animate to height: auto;, style scrollbars, and size text
14 | inputs to their contents.
15 |
16 |
17 |
18 | Many features have become Baseline Newly Available this year with exclusive accordions, @property, popover, and @starting-style all interoperable across major browsers.
24 |
25 |
26 |
27 | Thanks to the hard work by browser engineers, specification writers, and the
28 | input of the community, CSS has taken another great leap forward this year.
29 |
30 |
31 |
32 |
33 |
34 |
35 |
Scroll down to explore these exciting additions to the platform.
21 | Anchoring is a fresh and declarative way to position elements relative to
22 | each other. It's perfect for menus, tooltips, selects, labels, cards,
23 | settings dialogs, and many more. With anchor positioning built into the
24 | browser, you can build layered user interfaces without relying on
25 | third-party libraries.
26 |
27 |
28 | It takes two elements to create an anchor relationship: the anchor and
29 | positioned element(s).
30 |
31 |
32 | The anchor is the element that the positioned elements orient to. Turn
33 | an element into an anchor with one line of CSS:
34 |
35 |
42 |
43 | The positioned elements are the elements that are positioned relative
44 | to the anchor. These point to the anchor they want to be positioned relative
45 | to with position-anchor and a second line of CSS to specify the
46 | side or area the positioned should be in.
47 |
48 |
57 |
58 |
In the following demo, the cute egg is the anchor and the text "Over-Easy" is the positioned element.
59 |
60 |
61 |
62 |
The position-area property offers all sorts of options! The demo uses the logical property value block-end, but there's center, button, and tons more. Una made a GUI to help you visualize the options:
82 |
83 |
92 |
93 |
--------------------------------------------------------------------------------
/src/features/components/animate-to-height-auto.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import { Code } from "astro:components";
8 | import { Icon } from "astro-icon/components";
9 |
10 | import slugify from "./../../util/slugify";
11 | export const title = "Animate to height: auto";
12 | const slug = slugify(title);
13 | ---
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | An often requested CSS feature is the ability to animate to height: auto. A slight variation of that request is to transition the width property
25 | instead of the height, or to transition to any of the other intrinsic sizes
26 | represented by keywords like min-content, max-content, and fit-content.
29 |
30 |
31 |
32 | From Chrome 129 you can use the interpolate-size property or the
33 | calc-size() function to enable smooth transitions and animations
34 | from lengths to intrinsic sizing keywords and back.
35 |
36 |
37 |
38 |
39 |
40 | CSS interpolate-size demo. If your browser has no support, you
41 | can check the recording.
45 |
46 |
47 |
48 |
49 | The easiest way to enable this behavior is have the entire page opt-in to it
50 | by declaring interpolate-size: allow-keywords on :root.
53 |
54 |
55 |
63 |
64 | In most cases using interpolate-size should be sufficient. If you
65 | need more control over things–such as doing calculations with the resulting pixel
66 | value, or transitioning between the same two intrinsic sizing keywords use calc-size() instead.
70 |
71 |
72 |
73 |
74 |
86 |
87 |
--------------------------------------------------------------------------------
/src/features/components/exclusive-details.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import { Code } from "astro:components";
8 | import { Icon } from "astro-icon/components";
9 |
10 | import slugify from "./../../util/slugify";
11 | export const title = "Exclusive ";
12 | const slug = slugify(title);
13 | ---
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | A common UI pattern on the web is an accordion component. This component
23 | consists of several disclosure widgets that individually can be expanded (or
24 | collapsed) to reveal (or hide) their content.
25 |
26 |
27 |
28 | This pattern can be created on the web with a few <details> elements. These are typically grouped visually to indicate that they belong
31 | together.
32 |
33 |
34 |
35 | To make an exclusive accordion, add a name attribute to the <details> elements. When this attribute is used, multiple <details> elements that have the same name value form a semantic group. When you open
40 | one of the <details> elements from the group, the previously
41 | opened one will automatically close.
42 |
22 | Without field-sizing, to create a content-sized input field you
23 | had to either guess at an average size of a text field input or use
24 | JavaScript to count characters and increase the element height or width as
25 | the user entered text. Now it's a CSS one-liner.
26 |
27 |
34 |
35 | The following video demonstrates how a textarea, select,
36 | and input can now shrink to fit the size of the placeholder or
37 | content value.
38 |
39 |
40 |
41 | The following demo offers a side by side comparison of how inputs behave
42 | without field-sizing and with field-sizing.
43 |
44 |
45 |
46 | This will work for any font, any font size, any language and any writing
47 | mode. What used to be high effort will now be low effort.
48 |
49 |
50 |
59 |
60 |
--------------------------------------------------------------------------------
/src/features/components/styleable-details.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import { Code } from "astro:components";
8 | import { Icon } from "astro-icon/components";
9 |
10 | import slugify from "./../../util/slugify";
11 | export const title = "Styleable ";
12 | const slug = slugify(title);
13 | ---
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | From Chrome 131 you have more options to style the structure of <details> and <summary> elements. You can now use these elements when
25 | building disclosure or accordion widgets.
26 |
27 |
28 |
29 | In particular, the changes introduced in Chrome 131 enable the use of the
30 | `display` property on these elements, and add a ::details-content pseudo-element to style the part that expands and collapses.
33 |
34 |
35 |
36 | For example, to create a horizontal exclusive accordion, apply a flex layout
37 | that flows in the row direction to each <details> element.
38 |
39 |
40 |
48 |
49 |
50 |
51 |
52 | Demo: Horizontal exclusive accordion. If your browser has no support, check out the recording.
56 |
57 |
58 |
59 |
60 | In addition to using more display types, the content of the <details> element automatically gets wrapped in a ::details-content pseudo-element.
63 | All children of the <details> element except the <summary> get slotted into that pseudo.
66 |
67 |
68 |
69 | You can use this pseudo to control the part of the details disclosure
70 | element that expands and collapses.
71 |
72 |
73 |
74 |
75 |
76 | Demo: Material UI accordion. If your browser has no support, check out the recording.
80 |
81 |
82 |
83 |
84 |
92 |
93 |
--------------------------------------------------------------------------------
/src/features/developerexperience/at-property.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import { Code } from "astro:components";
8 | import { Icon } from "astro-icon/components";
9 |
10 | import slugify from "./../../util/slugify";
11 | export const title = "@property";
12 | const slug = slugify(title);
13 | ---
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 2024 marked the year that @property finally became Baseline Newly available. Having cross-browser support for @property is a very exciting
25 | milestone as with @property and its CSS.registerProperty counterpart you can register custom properties to be of a certain type, control
28 | their inheritance behavior, and give them an initial value.
29 |
42 | By registering a custom property to be of a certain type, the browser knows
43 | how to interpolate its values when used in transitions and animations.
44 |
45 |
46 |
47 | By animating a custom property, your CSS becomes more concise and also
48 | easier to read, as shown in the following snippet that animates the --angle property from 0deg to 360deg.
51 |
52 |
53 | ';
58 | initial-value: 0deg;
59 | inherits: false;
60 | }
61 |
62 | @keyframes adjust-angle {
63 | to {
64 | --angle: 360deg;
65 | }
66 | }
67 |
68 | div {
69 | --angle: 0deg;
70 | animation: 10s adjust-angle linear infinite;
71 | rotate: var(--angle);
72 | }`}
73 | />
74 |
75 |
76 |
77 |
78 | A demo with a rotating gradient border. The rotation is done by animating
79 | the --angle property which the gradient border uses.
80 |
81 |
82 |
83 |
107 |
108 |
109 |
110 |
117 |
118 |
--------------------------------------------------------------------------------
/src/features/developerexperience/backdrop-inheritance.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import { Code } from "astro:components";
8 | import { Icon } from "astro-icon/components";
9 |
10 | import slugify from "./../../util/slugify";
11 | export const title = "Backdrop Inheritance";
12 | const slug = slugify(title);
13 | ---
14 |
15 |
16 |
17 |
18 | {
19 | /* Disabled because the baseline widget shows ::backdrop support in general, not the inheritance changes specifically
20 |
21 |
22 |
23 | */
24 | }
25 |
26 | Historically the ::backdrop pseudo-element didn’t inherit from anywhere.
27 | From Chrome 122, this ::backdrop pseudo-element has been converted
28 | into a tree abiding element, meaning that it inherits any inheritable properties
29 | from its originating element.
30 |
31 |
32 |
33 | Thanks to this change it is possible to override custom property values on
34 | specific elements and ::backdrop will have access to them. For example,
35 | the ::backdrop associated with an open <dialog> element can now access the custom properties available in that <dialog>.
40 |
23 | To fix some weird quirks with CSS nesting, the CSSNestedDeclarations interface was added to the CSS Nesting spec. With it, declarations that come
26 | after style rules no longer shift up.
27 |
28 |
29 |
30 | This means that the following CSS snippet gives the .foo element
31 | a green background color instead of a red one, as would
32 | happen without CSSNestedDeclarations.
33 |
34 |
35 |
48 |
49 |
50 | With CSSNestedDeclarations the CSS rule serializes to the following,
51 | keeping the background-color: green declaration at its original
52 | location:
53 |
83 |
84 |
85 |
86 |
94 |
95 |
--------------------------------------------------------------------------------
/src/features/developerexperience/light-dark.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import { Code } from "astro:components";
8 | import { Icon } from "astro-icon/components";
9 |
10 | import slugify from "./../../util/slugify";
11 | export const title = "light-dark()";
12 | const slug = slugify(title);
13 | ---
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
System colors in CSS have the ability to react to the current used color-scheme value. For example, if you declare color: CanvasText in a CSS rule, the color of the matched elements will be either light or dark depending on the color-scheme value.
22 |
23 |
In the following demo, use the dropdown to control the color-scheme of the div. Because the div is styled with system colors, it supports both light and dark styles.
31 | The light-dark() function exposes the same capability to developers.
32 | This function accepts two arguments, both of which must be a <color>.
35 |
36 |
37 |
47 |
48 |
49 | By changing the value of color-scheme, either the first or the
50 | second value of light-dark() is used.
51 |
52 |
53 |
54 |
55 | If the used color scheme is light or unknown then the computed
56 | value of the first value gets returned.
57 |
58 |
59 | If the used color scheme is dark then the computed value of the
60 | second color is returned.
61 |
62 |
63 |
64 |
65 |
66 |
67 | light-dark() demo. Changing the selection changes the color-scheme value
70 |
71 |
72 |
73 |
92 |
93 |
94 |
95 |
103 |
104 |
--------------------------------------------------------------------------------
/src/features/developerexperience/paint-order.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import { Code } from "astro:components";
8 | import { Icon } from "astro-icon/components";
9 |
10 | import slugify from "./../../util/slugify";
11 | export const title = "paint-order";
12 | const slug = slugify(title);
13 | ---
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
When using text-stroke, the paint-order property can control the order that the text fill and desired stroke are stacked or rendered together. This can be useful when you want to ensure that the stroke is rendered on top of the fill.
23 |
24 |
The default paint order is: fill, stroke, then markers.
25 |
26 |
The following video shows how the result of the text stroke is undesirable if the text is filled white and then given a black stroke. Switch those around, so the stroke is drawn first and then filled, and the result is quite nice!
27 |
28 |
29 |
30 |
The CSS to control this is one line. Set the paint-order to draw the stroke before the fill by specifying those keywords in that order.
31 |
32 |
42 |
43 |
Try it for yourself in this CodePen:
44 |
45 |
46 |
47 |
Some folks say that the ability to control paint-order has finally made text-stroke usable in production. What do you think?
48 |
49 |
50 |
51 |
57 |
58 |
--------------------------------------------------------------------------------
/src/features/developerexperience/popover.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import { Code } from "astro:components";
8 | import { Icon } from "astro-icon/components";
9 |
10 | import slugify from "./../../util/slugify";
11 | export const title = "The Popover API";
12 | const slug = slugify(title);
13 | ---
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | The Popover API provides ways to build layered interfaces like tooltips,
23 | menus, teaching UIs, and more.
24 |
25 |
26 |
27 | To create a popover with default values, all you need is a button to trigger the popover, and an element that is the popover.
30 |
31 |
32 | Open Popover
36 |
37 |
38 |
I am a popover with more information. Hit esc or click away to close me.
48 | Popovers come with built-in support for top layer promotion, light-dismiss
49 | functionality, default focus management, and accessibility features.
50 |
51 |
52 |
53 |
54 |
61 |
62 |
--------------------------------------------------------------------------------
/src/features/developerexperience/ruby-align.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import { Code } from "astro:components";
8 | import { Icon } from "astro-icon/components";
9 |
10 | import slugify from "./../../util/slugify";
11 | export const title = "ruby-align";
12 | const slug = slugify(title);
13 | ---
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | From Chrome 128, ruby annotations are line-breakable and you can style ruby
24 | text with the ruby-align CSS property. This gives you finer control
25 | on how phonetic annotations or other supplemental information above or beside
26 | base text with <ruby> should be presented.
27 |
28 |
29 |
30 | With line-breakable ruby, wrapped ruby annotation text gets placed over
31 | wrapped base text, achieving ideal text rendering. Compare this before and
32 | after:
33 |
34 |
35 |
36 |
43 |
44 | Rendering result before Chrome 128 with long ruby annotation text.
45 |
46 |
47 |
48 |
49 |
56 |
57 | Rendering result as of Chrome 128 with long ruby annotation text.
58 |
59 |
60 |
61 |
62 | The new CSS property ruby-align controls the alignment of ruby base
63 | text and ruby annotation text. The property accepts one of the keyword values
64 | space-around, space-between, start,
65 | and center.
66 |
To automatically add pinyin to Chinese text and tweak its appearance, use this tool created by yisi(一丝)
80 |
81 |
82 |
83 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/src/features/developerexperience/starting-style.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import { Code } from "astro:components";
8 | import { Icon } from "astro-icon/components";
9 |
10 | import slugify from "./../../util/slugify";
11 | export const title = "@starting-style";
12 | const slug = slugify(title);
13 | ---
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | The @starting-style at-rule is used to define styles for an element
23 | before it has received the first style update. When setting those targeted properties
24 | to transition with CSS transitions, you can use these starting-styles to create
25 | entry effects.
26 |
27 |
28 |
29 | In the following example, newly added <div> elements fade
30 | from yellow to their initial background-color which is transparent.
31 |
96 |
97 |
98 |
99 |
110 |
111 |
--------------------------------------------------------------------------------
/src/features/interactions/scroll-driven-animations.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import YouTube from "../../components/youtube.astro";
8 | import { Code } from "astro:components";
9 | import { Icon } from "astro-icon/components";
10 |
11 | import slugify from "./../../util/slugify";
12 | export const title = "Scroll-Driven Animations";
13 | const slug = slugify(title);
14 | ---
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | Scroll-driven animations are a common UX pattern on the web. A scroll-driven
25 | animation is linked to the scroll position of a scroll container. This means
26 | that as you scroll up or down, the linked animation scrubs forward or
27 | backward in direct response.
28 |
29 |
30 |
In the following demo, if your browser has support for CSS scroll-driven animations, the images get unclipped as they cross the scrollport.
To support the launch of scroll-driven animations in Chrome 115, Chrome DevRel created “Unleash the Power of Scroll-Driven Animations”, a 10-part video course that teaches you all there is to know about scroll-driven animations with CSS or JavaScript.
75 |
76 |
77 |
78 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/src/features/interactions/scroll-snap-events.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import { Code } from "astro:components";
8 | import { Icon } from "astro-icon/components";
9 |
10 | import slugify from "./../../util/slugify";
11 |
12 | export const title = "Scroll Snap Events";
13 | const slug = slugify(title);
14 | ---
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
Built-in snap events have made previously invisible moments during scrolling, visible, at the right time, and always correct. They are the missing piece of the puzzle that makes scroll snapping a complete solution.
The scrollsnapchange event fires at a similar moment as scrollend, when scroll has rested and the user has stopped
34 | interacting with the scroller.
35 |
36 |
37 |
38 |
The scrollsnapchangingevent is eager to fire, and calls the callback the moment the scroller has a new snap target. This is useful for instant UX feedback, providing a mechanism for immediate visual updates based on the user's interaction.
By combining these events together you can create a seamless experience for picking elements with a scroll gesture. The following ruler experience snaps to quarter inch values and uses scroll driven animation to highlight the selected value. The scrollsnapchangingevent is used to immediately update the number input value, while the scrollsnapchange event is used to support and confirm the selected value.
49 |
50 |
51 |
52 |
Checkout the article on developer.chrome.com for more details and examples. Also, the following demo link is to a Snap Event visualizer, helping you feel and see the timing of these new events.
53 |
54 |
55 |
64 |
65 |
--------------------------------------------------------------------------------
/src/features/interactions/scrollbar-styling.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import { Code } from "astro:components";
8 | import { Icon } from "astro-icon/components";
9 |
10 | import slugify from "./../../util/slugify";
11 |
12 | export const title = "Custom Scrollbars";
13 | const slug = slugify(title);
14 | ---
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | Styling scrollbars has long been possible with the ::-webkit-scrollbar-* pseudo-elements. This approach works fine in Chrome and Safari, but was never
28 | standardized by the CSS Working Group.
29 |
30 |
31 |
32 | Available from Chrome 121 are the scrollbar-width and scrollbar-color properties to style the width and, respectively, the color of the scrollbar.
35 |
36 |
37 |
45 |
46 |
47 | These properties are also supported by Firefox and have partial support in
48 | Safari.
49 |
50 |
51 |
52 |
53 |
54 | Custom Scrollbars demo. Use the color inputs to change the colors.
55 |
56 |
57 |
58 |
79 |
80 |
81 |
82 |
90 |
91 |
--------------------------------------------------------------------------------
/src/features/interactions/view-transitions-mpa.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import FeatureLayout from "./../_layout.astro";
3 | import Title from "../../components/feature.title.astro";
4 | import Author from "../../components/author.astro";
5 | import Video from "../../components/video.astro";
6 | import CodePen from "../../components/codepen.astro";
7 | import YouTube from "../../components/youtube.astro";
8 | import { Code } from "astro:components";
9 | import { Icon } from "astro-icon/components";
10 |
11 | import slugify from "./../../util/slugify";
12 |
13 | export const title = "Cross-Document View Transitions";
14 | const slug = slugify(title);
15 | ---
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | In 2023, Chrome was the first browser to ship same-document view
26 | transitions, an exciting addition to the web platform that allows you to
27 | have rich and seamless transitions between various views of your website.
28 | This year, Chrome continued to push the web forwards by shipping
29 | cross-document view transitions in Chrome 126.
30 |
31 |
32 |
33 | Cross-document view transitions allow you to run a view transition between
34 | two separate documents. As a result, you no longer need to rework your
35 | website as a SPA to use view transitions. All it takes is a navigation from
36 | one page to another, a core primitive that makes the web “the web”.
37 |
47 | To allow a view transition to run between two pages you need to fulfill two
48 | conditions: the navigation must be a same-origin navigation and both pages
49 | need to opt in to allow the view transition to run. Opting in is done with
50 | the following CSS rule:
51 |
52 |
53 |
60 |
61 |
62 | Once enabled, cross-document view transitions use the same building blocks
63 | as same-document view transitions: add the view-transition-name
64 | property to the elements that you want to capture, and the animations are powered
65 | by CSS animations.
66 |
67 |
68 |
69 | Apart from shipping cross-document view transitions, Chrome also shipped a
70 | few extra additions to more easily work with view transitions, such as view-transition-class. These changes were announced at Google I/O ’24 in May.
73 |
74 |
75 |
76 |
77 |
78 | Video from Google I/O ’24: “Multi-page application View Transitions are
79 | here”
80 |
81 |
82 |
83 |
84 | This year we also welcomed Safari in shipping view transitions and are
85 | looking forward to seeing Firefox continue working on their same-document
86 | implementation.
87 |
108 |
109 |
110 |
111 |
123 |
--------------------------------------------------------------------------------
/src/icons/book.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/check.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/chrome.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/close.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/css.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/icons/dino.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/icons/down-arrow.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/feedback.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/hamburger.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/home.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/play.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/star.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import "../styles/global.css";
3 | import slugify from "./../util/slugify";
4 |
5 | import PrimaryNav from "../components/nav.primary.astro";
6 | import Hero from "../components/hero.astro";
7 | import FeatureFilmstrip from "../components/feature.filmstrip.astro";
8 | import Biomes from "../components/biomes.astro";
9 | import Footer from "../components/footer.astro";
10 | import AsideNav from "../components/nav.aside.astro";
11 | import CookieConsent from "../components/cookieconsent.astro";
12 |
13 | import * as FieldSizing from "../features/components/field-sizing.astro";
14 | import * as AnimateToHeightAuto from "../features/components/animate-to-height-auto.astro";
15 | import * as ExclusiveDetails from "../features/components/exclusive-details.astro";
16 | import * as StyleableDetails from "../features/components/styleable-details.astro";
17 | import * as AnchorPositioning from "../features/components/anchor-positioning.astro";
18 |
19 | import * as BackdropInheritance from "../features/developerexperience/backdrop-inheritance.astro";
20 | import * as LightDarkFunction from "../features/developerexperience/light-dark.astro";
21 | import * as AtProperty from "../features/developerexperience/at-property.astro";
22 | import * as Popover from "../features/developerexperience/popover.astro";
23 | import * as StartingStyle from "../features/developerexperience/starting-style.astro";
24 | import * as RubyAlign from "../features/developerexperience/ruby-align.astro";
25 | import * as PaintOrder from "../features/developerexperience/paint-order.astro";
26 | import * as CSSOMNestedDeclarations from "../features/developerexperience/cssom-nested-declarations.astro";
27 |
28 | import * as ScrollbarStyling from "../features/interactions/scrollbar-styling.astro";
29 | import * as ViewTransitionsMPA from "../features/interactions/view-transitions-mpa.astro";
30 | import * as ScrollDrivenAnimations from "../features/interactions/scroll-driven-animations.astro";
31 | import * as ScrollSnapEvents from "../features/interactions/scroll-snap-events.astro";
32 |
33 | const biomes = [
34 | {
35 | title: "Components",
36 | description: `We traveled over the mountains to bring
37 | exciting overlay UX with anchor,
38 | the power to animate to height auto,
39 | easily turn details into an accordion,
40 | get more access to details styling,
41 | and intrinsically size form elements!`,
42 | backdrop: "desert",
43 | image: "./biomes/desert.png",
44 | alt: "Desert scene in low-res bitmap style",
45 | features: [
46 | FieldSizing,
47 | AnimateToHeightAuto,
48 | ExclusiveDetails,
49 | StyleableDetails,
50 | AnchorPositioning,
51 | ],
52 | },
53 | {
54 | title: "Interactions",
55 | description: `Through the forest we found features for styling the scrollbar,
56 | using multi-page view transitions,
57 | creating scroll animations and
58 | events for scroll snap!`,
59 | backdrop: "arctic",
60 | image: "./biomes/arctic.png",
61 | alt: "Arctic scene in low-res bitmap style",
62 | features: [
63 | ScrollbarStyling,
64 | ViewTransitionsMPA,
65 | ScrollDrivenAnimations,
66 | ScrollSnapEvents,
67 | ],
68 | },
69 | {
70 | title: "Developer Experience",
71 | description: `Things got even easier after we traveled across the seas.
72 |
73 |
We discovered ways to simplify backdrop inheritance,
74 | a magic color function called light-dark(),
75 | safer and smarter variables with @property,
76 | a way to specify a starting style for transitions,
77 | ways to pop into the top-layer,
78 | improved ruby alignment,
79 | options for layering text strokes with text fill,
80 | and even more ways to relax CSS nesting!`,
81 | backdrop: "jungle",
82 | image: "./biomes/jungle.png",
83 | alt: "Jungle scene in low-res bitmap style",
84 | features: [
85 | BackdropInheritance,
86 | LightDarkFunction,
87 | AtProperty,
88 | Popover,
89 | StartingStyle,
90 | RubyAlign,
91 | PaintOrder,
92 | CSSOMNestedDeclarations,
93 | ],
94 | },
95 | ];
96 |
97 | // Flatten all Biome features to a list of CSS timeline names
98 | const timelines = biomes.reduce(
99 | (timelines, biome) => [
100 | `--vtl--${slugify(biome.title)}`,
101 | ...biome.features.map(
102 | (feature) => `--vtl--${slugify(biome.title)}--${slugify(feature.title)}`
103 | ),
104 | ...timelines,
105 | ],
106 | []
107 | );
108 | ---
109 |
110 | {/* remove the VT until the clientside theme switch is loaded so we dont flash a VT */}
114 |