Safari Technology Preview 123 and later (March 31, 2021)ĭata on support for the mdn-css_properties_grid feature across the major browsers Toggle different alignment valuesĪs you can see, there are feature differences between the 2 browsers, but don’t we all have multiple browsers installed on our machines when we’re working in this industry? ¯\_(ツ)_/¯ Grid inspector And here’s where I think that as people use this feature more and more, they are sort of teaching themselves these alignment properties, and of course, being able to see what happens on the page as they toggle through the different values also helps. Chrome made a UX design choice to put the flex information like direction and wrap in a pop-up when you click the icon.īut that’s not all, you can switch up the different alignment properties from this interface directly. If you’re in the Styles panel, where all the CSS rules are listed, you should see an icon that looks like a 六索 mahjong tile to my Chinese brain. You can also do this toggling in the Layout panel. Clicking that would toggle a Flexbox overlay, and multiple overlays can be active at the same time. If you already have Chrome 90 (which was stable release as of 14 April 2021), you should be able to see a flex tag in the Inspector on elements which are Flex containers. It shows you the starting width from which the browser figures out the size of your flex item, then the subsequent calculations that give you the end size. The information about Flex items is my favourite feature of this tool, which shows up when you click on any of the Flex items in the Layout panel.
The panel will also show you the flex direction and wrap status on the Flex container. In Firefox, you can toggle the Flexbox overlay by clicking on the flex tag in the Inspector, clicking the little 2-box icon next to the display value of flex in the Rules panel or directly from the Layout panel.
“Flexbox, where nobody knows the exact size of anything”įlexbox explained by 👌😅 #ViewSourceConf /2zE7ay6VSa- Milica Mihajlija OctoFirefox Flexbox inspector I admit I too have made a joke about that on stage but it was to highlight the importance of having a Flexbox inspector in DevTools. Flexbox inspectorĭata on support for the mdn-css_properties_flex feature across the major browsersįlexbox is a feature that has been around for a long time now, but can still be confusing to wrap your head around. Now, it’s time for what we have on hand in 2021. More story in this Smashing Magazine article, if you’re interested. And now, Webkit has joined the party, as Safari Technology Preview 123 adds Grid inspecting features as well. Chrome added a basic grid inspector tool in Chrome 62 that let developers highlight elements using grid layout, but more robust features were only added in Chrome 87. And now, more than 2 years later, Chrome is adding that feature to its DevTools as well.įirefox’s grid inspector was pretty full-featured from the get-to and released together with CSS grid in Firefox 52. They came out with the Flexbox inspector in Firefox 65, in January 2019. I have spoken about DevTools for CSS at a couple of conferences and had always used Firefox for them because it had the most features for CSS layouts since 2019. And with the way things are going, I think this might be becoming a thing. I’m personally convinced that DevTools can be more than just a debugging tool, it can potentially be a source of guidance right in our browsers. And they have been really generous with their time and knowledge. Recently, I’ve been seeing updates from both the Webkit and Chrome team about updates to layout-related DevTools features and thought it’d be nice to do a write-up about them.Įven though I’ve never gotten a job at any of the browser companies before, I have been incredibly lucky to have had numerous opportunities to meet and chat with folks from Mozilla, Google and Apple. As someone who loves and works with CSS on an almost daily basis, DevTools are something near and dear to my heart.
0 kommentar(er)
