DEV Community

Cover image for 1–10 Must CSS Layout Rules (Safari + Responsive Safe)
raielly
raielly

Posted on

1–10 Must CSS Layout Rules (Safari + Responsive Safe)

#css #beginners #webdev

If your website uses native CSS, skipping these guidelines can lead to hidden layout problems on real devices such as iPhones (11–15), Safari, and iPads.

1. Base Setup

✅ Always start with a reset or normalize:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

✅ Use :root for color + spacing variables.
✅ Define body { font-family; line-height; color; background-color; }.
✅ Set global image styles:

img {
  max-width: 100%;
  height: auto;
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

✅ Add overflow-x: hidden; on body if animations or transforms move content sideways.

2. Layout Systems

Flexbox Tips

  • Use Flex for 1-dimensional layouts (rows or columns only).
  • Use Grid for 2-dimensional layouts (rows + columns).
  • Common Flex rules: 
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
Enter fullscreen mode Exit fullscreen mode

Add fallback for Safari <15 (no gap):

@supports not (gap: 1rem) {
  .flex-item + .flex-item {
    margin-left: 1rem;
  }
}
Enter fullscreen mode Exit fullscreen mode

Grid Tips

  • Always define rows/columns explicitly: 
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 1rem;
Enter fullscreen mode Exit fullscreen mode

Prefer minmax(0, 1fr) to prevent overflow bugs in Safari.

3. Responsive Design

✅ Always include viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

✅ Use relative units (rem, %, vh, vw) over px.
✅ Common breakpoints:

@media (max-width: 1200px) { ... } /* desktop */
@media (max-width: 992px) { ... }  /* tablet */
@media (max-width: 768px) { ... }  /* landscape phone */
@media (max-width: 480px) { ... }  /* mobile */
Enter fullscreen mode Exit fullscreen mode

✅ Test with “responsive design mode” on Safari DevTools and Chrome.

4. Safari/iPhone-Specific Gotchas

Issue: Grid inside Flex not expanding   
Fix: Add width: 100%; min-height: 0;

Issue: Scrollable div inside flex not scrolling 
Fix: Add overflow: auto; -webkit-overflow-scrolling: touch;

Issue: gap not working in flex  
Fix: Use margin-left fallback

Issue: Fixed element with bottom: 0 overlaps keyboard   
Fix: Use position: sticky; bottom: 0; instead when possible

Issue: 100vh too tall on iPhone (browser UI height issue)   
Fix: Use height: 100dvh; (dynamic viewport unit)

Issue: Z-index issues on iOS (e.g. modals)  
Fix: Make sure parent has position: relative; z-index: 0;

Issue: position: sticky not working 
Fix: Ensure parent doesn’t have overflow: hidden; or overflow: auto;
Enter fullscreen mode Exit fullscreen mode

5. Typography & Spacing

✅ Use fluid scaling:

html {
  font-size: clamp(14px, 1.5vw, 18px);
}
Enter fullscreen mode Exit fullscreen mode

✅ Line height around 1.4–1.6 for body text.
✅ Use consistent spacing scale:

:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
}
Enter fullscreen mode Exit fullscreen mode

✅ Set consistent heading sizes (e.g. h1 { font-size: 2rem; } etc.)

6. Buttons, Forms, and Inputs

✅ Remove default Safari styles:

button, input, textarea, select {
  font: inherit;
  border: none;
  outline: none;
}
Enter fullscreen mode Exit fullscreen mode

✅ Add visible focus states for accessibility.
✅ Prevent zoom on input focus (iPhone Safari):

input, select, textarea {
  font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode

7. Animations / Transitions

✅ Prefer transform and opacity (GPU-accelerated).
✅ Avoid animating layout properties (width, top, left).
✅ For Safari smoothness:

* {
  -webkit-transform: translateZ(0);
}
Enter fullscreen mode Exit fullscreen mode

✅ Add prefers-reduced-motion media query for accessibility.

8. Accessibility & Semantics

✅ Use semantic tags (header, main, footer, section, nav, article).
✅ Use aria-labels or alt text for images.
✅ Check color contrast.
✅ Don’t rely on color alone to convey information.

9. Performance

✅ Combine and minify CSS.
✅ Lazy load images.
✅ Use content-visibility: auto; for off-screen sections (modern browsers).
✅ Use will-change sparingly for smoother animations.

10. Debug Checklist

Before marking a layout as done:

  • Works on Chrome, Safari, Firefox, Edge.
  • Tested on iPhone & Android devices.
  • No overflow horizontally.
  • Text readable at all breakpoints.
  • Buttons/touch targets large enough (min 44px height).
  • Scrolls smoothly without layout shift.
  • No console warnings.

Top comments (0)