![]() Element gets its own stacking context, which can introduce bugs if you aren’t expecting it. Layout effects in other parts of the DOM will not trigger layout recalculations for children of this element. This has the biggest impact (because it also avoids paints). Michael created a testing environment that allowed him to trigger layout and painting.Ĭontain is supported in all the major browsers, and has been supported for awhile in most, but just landed in Safari 15.4.Ĭontain: layout helps us reduce layouting cost. screen viewport: determines what elements are actually visible.visible boundary: determines the area that needs painting.border-box: determines the layout dimensions for an element.Composite merges all the layers into one image.Paint generates the pixels for all layers.Hit testing determines the pointer bounds for mouse interactions.Layout calculates the dimensions of elements.Recalculate Styles determines what styles change on what elements as a result.Scripting introduces changes to DOM or Styles.Michael Mladky: “Modern CSS rendering performance” #Ĭhrome’s rendering pipeline has 12 steps! contain and content-visibility let us skip steps of this rendering pipeline to improve performance. Michael Mladky: “Modern CSS rendering performance” to Useful interactive coding challenges: frontendmentor.io Repeat for all components, remove the temporary overrides as you go.Īvoiding the need to refactor: discipline, attention to detail, CSS knowledge, well-bounded components.Use visual regression tooling if you can. Remove legacy CSS, test & deploy: Consider A/B testing to detect any impact on user experience.If the new styles clash or are broken by old styles, implement temporary fixes in a separate file, that you will delete later. Merge & fix issues: Replace the markup and add the new CSS leave the legacy styles for now.develop it in CodePen, or prefix class names for this component) ![]() ![]() Develop styles for the component in isolation (e.g.Select lowest-scope component (in this case, the card rather than the grid in which it is contained).Refactoring strategy (example: legacy card CSS + global CSS): Try to keep tasks small (see: Refactoring Tunnels). Do it in a way that doesn’t block feature development. Work with leadership to set aside time for this kind of housekeeping. Refactoring is best done at quiet times in a codebase that you know will be actively modified going forward. This article lists all the forms of unwanted complexity that creep into a CSS codebase. Netlify refactored their codebases last year (semantic CSS → Tailwind). We want to refactor, but we need to consider some important details to make this practical. Codebases become more and more difficult to maintain. If a device uses a soft keyboard, its viewport may change from portrait to landscape while the device itself is still in portrait position.Adrian Bece: “Effective CSS refactoring” toĪdrian Bece: “Effective CSS refactoring” #ĬSS is a simple language, which leaves the door open for many antipatterns. You should note that a viewport orientation is different from a device orientation. The code above generates two input radio options, which will vary based on the accuracy of a computer’s primary pointing device.Ī computer that has an accurate (or high quality) primary pointing device will display the following web page:Ī device viewport can only have one of two orientations: portrait or landscape. And the fine value applies when the primary pointing device has a high level of accuracy. The coarse value applies when the primary pointing device has a diminished level of accuracy. The none value applies when there’s no pointing device. This pointer media query feature takes one of three values: none, coarse, or fine. You can test for availability and quality. The rule has a pointer feature that allows you to customize your design based on the primary pointing device.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |