Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace inline style with hidden attribute. #26

Merged
merged 2 commits into from Jul 14, 2023
Merged

Conversation

ahmadalfy
Copy link
Contributor

The hidden attribute serves the purpose of hiding content from the document. We can have multiple display options rather that block specially with responsive design where having different display value based on the viewport might be required. Switching to the hidden attribute allow us to control the display with ease and shift the display to the CSS files.

I had to set the display of the hidden element to none with important to ensure having a specificity higher than the target elements if there are other display values applied to them.

The hidden attribute serves the purpose of hiding content from the
document. We can have multiple display options rather that `block`
specially with responsive design where having different display value
based on the viewport might be required. Switching to the hidden
attribute allow us to control the diplay with ease and shift the display
to the CSS files.

I had to set the display of the hidden element to none with important to
ensure having a spcificity higher than the target elements if there are
other display values applied to them.
@1Marc
Copy link
Owner

1Marc commented Jul 13, 2023

This is very cool! I haven't seen this approach before.

@ahmadalfy
Copy link
Contributor Author

Following up on your comment about applying modifications to the CSS, I've removed it. It is still behaving and looking like before.

@arikchakma
Copy link

Nice idea🔥

@Danny-Engelman
Copy link

This is very cool! I haven't seen this approach before.

hidden has been around since HTML5 was released. And there is more to it then just hiding stuff

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden

@dev-bushra
Copy link

Cool approach

@1Marc 1Marc merged commit 1df6590 into 1Marc:main Jul 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants