taks-custom-base-css
v1.3.4
Published
This CSS is built based on Normalize.css. It aims to normalize styles for better cross-browser compatibility and to remove default browser styling.
Downloads
173
Maintainers
Readme
TAK's Custom Base.css
Overview
TAK's Custom Base.css is a CSS library designed to normalize styles and ensure consistency across different browsers. This stylesheet is based on Normalize.css and has been customized by TAK.
Key Features
- Ensures as much consistency as possible across browsers.
- Prevents the need to reset user agent styles.
- Uses the
:where()
pseudo-class to reduce specificity conflicts. - Applies
box-sizing: border-box
to all elements so padding and borders are included in element dimensions. - Utilizes a common sans-serif font stack for broader cross-platform compatibility.
- Enhances readability by adjusting line spacing and underlines.
- Adds transparent borders where necessary to accommodate forced color modes.
- Prioritizes the use of logical properties to enhance layout direction independence and maintain styling consistency across different writing modes.
- Supports modern elements and attributes like
dialog
,search
,[popover]
, and[hidden="until-found"]
. - Prevents VoiceOver in Safari from recognizing list elements with
list-style: none
as a list by usinglist-style-type: ""
to hide them. - Prepared a custom property in CSS to remove the half-leading in
line-height
. - Prepared utility classes for
leading-trim
andvisually-hidden
. - Prepared fallback tricks for hover states.
Installation
NPM
npm install --save taks-custom-base-css
CDN
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/taks-custom-base-css/taks-custom-base.css"
/>
Usage
Place this CSS file in the appropriate location in your project and add a link to it in the <head>
section of your HTML file.
<link rel="stylesheet" href="path/to/taks-custom-base.css" />
Browser Compatibility
TAK's Custom Base.css is designed to work with the following browsers:
- Google Chrome (latest version)
- Microsoft Edge (latest version)
- Firefox (latest version)
- MacOS Safari (latest version)
- iOS Safari (version 16.7 and above)
These browsers are officially supported and tested. While the stylesheet may work on other browsers or older versions, optimal performance and consistency are guaranteed on the versions listed above.
License
This project is released under the MIT License. For more details, refer to the GitHub repository.
How to Contribute
If you are interested in contributing to this project, please do so through pull requests or issues on GitHub. We look forward to your contributions as part of our community.