New properties and functions will enable you to animate properties that, until now, were not animatable. We'll look at the following properties: transition-behavior calc-size @starting-style used to: Change the height of an element from 0 to auto Change the value of display from none to block The code These are the properties we'll use for these examples. transition-behavior The transition-behavior property specifies whether transitions will be started for properties whose animation behavior is discretehttps://developer.mozilla.org/en-US/docs/Web/CSS/transition-behaviorexamples. Discrete properties' values are not additive, and interpolation swaps from the start value to the end value at 50%. Specifically, denoting p as the progress value:...
There are four properties that I've always been curious and confused about: initial inherit unset revert These values are specified in the Values and Units Module Level 4https://drafts.csswg.org/css-values-4/textual-values specification. Resetting a Property: the initial keyword The initial keyword applies the property's default value to an element. It can be applied to any property, including the all shorthand property. With the property set to initial, all properties can be restored to their respective initial values in one go instead of restoring each one separately. css .demo { all: initial; } The initial value for inherited properties may be unexpected. You should...
Many CSS properties accept numbers as values. Whether these values are whole numbers, decimals, fractions or percentages. Whatever they are, the unit following a number determines its computed lengthhttps://css-tricks.com/computed-values-more-than-meets-the-eye/. So, what does the term length mean in the context of CSS as defined in the CSS Values and Units Module Level 4https://drafts.csswg.org/css-values-4/ specification? “Length” means any sort of distance that can be described as a number, such as the physical dimensions of an element, a measure of time, geometric angles… all kinds of things! Some examples of numbers: css / Unitless numbers / 1 / Pixels / 14px / em...
The gap property has evolved considerably and has become easier to work with. This post will discuss the evolution of creating gaps in content and how to use the gap property. In the early days of CSS, we would use the marginhttps://developer.mozilla.org/en-US/docs/Web/CSS/margin property When one value is specified, it applies the same margin to all four sides When two values are specified, the first margin applies to the top and bottom, and the second to the left and right When three values are specified, the first margin applies to the top, the second to the right and left, and the...
MathJax = { tex: { inlineMath: '$', '$', '\\', '\\' }, }; It's not common but there are times when we need to render math equations in a web page. This post will discuss two strategies for rendering math on web pages: The MathJAX third-party library and MathML, a native way to render math in browsers. We'll discuss the individual tools and why would we choose one over the other. Tools like iMathEQhttps://www.imatheq.com/imatheq/com/imatheq/math-equation-editor-latex-mathml.html allow to you create MathML and LaTeX that you can paste directly on your web content, but these graphical editors still require you to know enough math...
This is a follow-up to Web Components, FTWhttps://publishing-project.rivendellweb.net/web-components.ftw which was getting too long and adds more areas of interest and further research. Accessibility And elementInternals The Guide to Accessible Web Componentshttps://www.erikkroes.nl/blog/accessibility/the-guide-to-accessible-web-components-draft/ I want to highlight elementInternalshttps://developer.mozilla.org/en-US/docs/Web/API/ElementInternals, in particular the accessibility portion of the interface. The interface provides a way for custom elements to handle forms. It also exposes the Accessibility Object Model AOMhttps://wicg.github.io/aom/explainer.html. Using this interface is in addition to the manual work that you do to create accessibility affordances. You can also override the default values provided by the interface by setting aria- attributes directly on the element. These...
Material Design 3 is a very good design library coming from Google and it's the latest version of their Material Designhttps://m3.material.io/ design language. There are versions of Material for all the languages and libraries Google makes available: Webhttps://m3.material.io/develop/web Flutterhttps://m3.material.io/develop/android/jetpack-compose Android MDC Androidhttps://m3.material.io/develop/android/mdc-android Jetpack Composehttps://m3.material.io/develop/android/jetpack-compose Angularhttps://material.angular.io/ This post will concentrate on Material Design Web and try to do the following: Explain what is Material Design Explain how to build a design/layout with Material Design Web Decide if the library is still worth using since it went into maintenance modehttps://github.com/material-components/material-web/discussions/5642discussion-6805266 due to Google reassigning the engineering team working on Material Web to...
Laravel for PHP and Ruby on Rails for Ruby provide a full set of opinionated, 'batteries included' of tools, libraries and processes to create web applications. In Why We Don't Have a Laravel For JavaScript... Yethttps://wasp-lang.dev/blog/2024/05/29/why-we-dont-have-laravel-for-javascript-yet, Vinny a DevRel engineer at Wasp discusses his views on why Javascript doesn't have an opinionated framework like Ruby on Rails or Laravel. I have a different opinion of why Javascript doesn't have an equivalent tool and will discuss it in this post, along with a set of ideas I would use to build an equivalent platform. I will also base the content of...
I've been busy writing content but there are things that I'm either long overdue in implementing or want to explore. This should keep me busy when not writing posts and working on other projects. Dark Theme Re-evaluate the existing color palette and come up with a decent dark color palette Use the light-darkhttps://developer.mozilla.org/en-US/docs/Web/CSS/colorvalue/light-dark function to simplify the color schemes Web Components Color.js elementshttps://elements.colorjs.io/ — Lea Verou Be mindful that these components are under development and they may change without notice Is forking at this point worth consideration? playground-elementshttps://github.com/google/playground-elements — Google share-urlhttps://nigelotoole.github.io/share-url/ to create share links for different platforms Evaluate if...
CSS has had the ability to use keyframe animations for a long time. This post will concentrate in the animation timing functions available and how they affect the animations they are attached to. Review: The CSS Animation Property The animation CSS property applies an animation between styles. It is a shorthand for the following properties: animation-delayhttps://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay : Specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. : The animation can start later, immediately from its beginning, or immediately and partway through the animation. animation-directionhttps://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction : Sets the direction the...
