Use a feature query to check browser support for CSS Grid by wrapping your code in an @supports rule.
- [Instructor] The very first thing we need to do…is make sure the browser actually supports…CSS grid before we ask it to use CSS grid for our layouts.…I'll do that all the way at…the bottom of style, main.CSS.…You'll find here there's already…a common that sets up CSS grid layout for modern browsers.…And inside the section I want to use a feature query…to ask the browser, "Hey, do you support CSS grid?…If so, run this code, otherwise, just ignore everything."…It looks like this, at supports.…
And then we specify what we are looking for,…and in this case I want to test for grid area auto.…Now if you look on the internet,…you'll find a lot of people recommend…testing for display colon grid.…The problem with that is some older browsers…actually have legacy support for the old version…of CSS grid, so they'll answer true to that question…even though they don't support the current modern spec.…As a result, things that you add in…that you think should work, might not work…in these older browsers.…
However, if you test for grid area auto,…
- Defining a grid
- Grid lines and units
- Automatic and manual grid item placement
- Planning for grid layouts
- Starting your layouts with pen and paper
- Multicolumn layouts
- Full-bleed single column layouts
- Making the grid responsive
- Various card layouts
- Accessible off-screen navigation layouts
Skill Level Advanced
Building Responsive Forms with Flexboxwith James Williamson1h 19m Intermediate
1. CSS Grid: Core Principles
2. Planning for Grid Layouts
Accessibility first1m 54s
3. Multi-Column Layout
4. Full-Bleed Single Column Layout
5. Various Card Layouts
6. Accessible Off-Screen Navigation Layouts
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.