When user interface in a browser, it’s good to minimize those differences and issues wherever you can, so that the UI is predictable. Keeping track of all of those differences is hard, so I’ve put together a list of common issues, with their solutions, as a handy reference guide for when you’re working on a new project.
1. Reset The Backgrounds
User can set background of buttons and elements by given bellow code to work without any problem.
When adding a button, reset its background, or else it will look different across browsers. In the example below, the same button is shown in Chrome and in Safari. The latter adds a default gray background.
Resetting the background will solve this issue:
button {
appearance: none;
background: transparent;
/*other style*/
}
2. Overflow:
To limit the height of an element and allow the user to scroll within it, add overflow: scroll-y. This will look good in Chrome on macOS. However, on Chrome Windows, the scroll bar is always there (even if the content is short). This is because scroll-y will show a scroll bar regardless of the content, whereas overflow: autowill show a scroll bar only when needed.
.element {
height: 300px;
overflow-y: auto;
}
3. Add flex-wrap
Make an element behave as a flex container simply by adding display: flex. However, when the screen size shrinks, the browser will display a horizontal scroll bar in case flex-wrap is not added.
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
</div>
CSS File content:
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
The example above will work great on big screens. On mobile, the browser will show a horizontal scroll bar.
The solution is quite easy. The wrapper should know that when space is not available, it should wrap the items.
.wrapper {
display: flex;
flex-wrap: wrap;
}
4. Don’t Use justify-content
When justify-content: space-between is applied to a flex container, it will distribute the elements and leave an equal amount of space between them.
5. Long Words And Links
When an article is being viewed on a mobile screen, a long word or inline link might cause a horizontal scroll bar to appear. Using CSS’ word-break will prevent that from happening.
.article-content p {
word-break: break-all;
}
6. Transparent Gradients
When adding gradient with a transparent start and end point, it will look black-ish in Safari. That's because Safari doesn’t recognize the keyword transparent. By substituting it with rgba(0, 0, 0, 0), it will work as expected.
.section-hero {
/*Other styles*/
}
.section-hero {
/*Other styles*/
}
7. Mis-understanding between auto-fit And auto-fill In CSS Grid
In CSS grid, the repeat function can create a responsive column layout without requiring the use of media queries. To achieve that, use either auto-fill or auto-fit.
.wrapper {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
In short, auto-fill will arrange the columns without expanding their widths, whereas auto-fit will collapse them to zero width but only if you have empty columns
8. Fixing Elements To The Top Of The Screen When The Viewport Is Not Tall Enough
If you fix an element to the top of the screen, what happens if the viewport is not tall enough? Simple: It will take up screen space, and, as a result, the vertical area available for the user to browse the website will be small and uncomfortable, which will detract from the experience.
@media (min-height: 500px) {
.site-header {
position: sticky;
top: 0;
/*other styles*/
}
}
9. Setting max-width For Images
When adding an image, define max-width: 100%, so that the image resizes when the screen is small. Otherwise, the browser will show a horizontal scroll bar.
img {
max-width: 100%;
}
10. Using CSS Grid To Define main And aside Elements
CSS grid can be used to define the main and aside sections of a layout, which is a perfect use for grid. As a result, the asidesection’s height will be equal to that of the main element, even if it’s empty.
To fix this, align the aside element to the start of its parent, so that its height doesn’t expand.
.wrapper {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-gap: 20px;
}
// align-self will tell the aside element to align itself with the start of its parent.
aside {
grid-column: 1 / 4;
grid-row: 1;
align-self: start;
}
main {
grid-column: 4 / 13;
}
11. Adding fill
Sometimes, while working with SVGs, fill won’t work as expected if the fill attribute has been added inline in the SVG. To solve this, either to remove the fill attribute from the SVG itself or override fill: color.
12. Add for="ID"
When working with form elements, make sure that all label elements have an ID assigned to them. This will make them more accessible, and when they’re clicked, the associated input will get focus.