首页 > 其他分享 >reset.css 2022

reset.css 2022

时间:2022-12-16 11:12:39浏览次数:45  
标签:reset revert select user 2022 webkit where css

/***
    The new CSS reset - version 1.7.3 (last updated 7.8.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
    cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
    -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
    -webkit-appearance: revert;
    appearance: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
    color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
    display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}

 

标签:reset,revert,select,user,2022,webkit,where,css
From: https://www.cnblogs.com/it-Ren/p/16986749.html

相关文章

  • Illustrator 2022 for mac (AI 2022中文版) v26.4.1激活版
    illustrator 2022中文版是一款矢量图形软件,您可以制作适用于印刷、Web、视频和移动设备的徽标、图标、绘图、版式和插图的矢量图设计软件。Adobeillustrator2022forMac......
  • 【卫朋】3000+ 字 | 2022年产品人必备的23个设计类网站(2.0版)
    卫朋丨第122篇原创文章阅读提示丨3061字5分钟常用资源,大家可先收藏资源在手,思路我有设计资源网站是产品人打基础的一个有效手段,是解答设计命题的思路参考。但资源诚可贵,实......
  • 如何使用CSS提高页面性能
    一、前言大家好,我是CoderBin,每一个网页都离不开css,但是很多人又认为,css主要是用来完成页面布局的,像一些细节或者优化,就不需要怎么考虑,实际上这种想法是不正确的作为页面......
  • 2022Mybatis-plus超详解
    Mybatis-plus学习笔记1、创建数据库及表1.1、创建表CREATEDATABASE`mybatis_plus`;USE`mybatis_plus`;CREATETABLE`user`(`id`BIGINT(20)NOTNULLCOMMENT'主......
  • 2022秋 矩阵论考试及答案
    ......
  • 2022-12-15 成交量基础概念
    1. 突破前期大量的高点,说明那里的套牢盘被解放。 例1:  例2:      例3: ......
  • 电子文件管理方案2022-12-12.docx
      电子文件管理方案2022-12-12.docx 一、命名文件与备注的格式事项简明描述-姓名和手机号-总金额(元)-批次比例(第__次)-地点位置(百度地图)-对方单位名称-批注注释-【分......
  • 2022-12-15 抵扣
    富途moomoo指标设置DRAWTEXT(CURRBARSCOUNT=5,L*0.98,'△'),COLORWHITE,LINETHICK2DRAWTEXT(CURRBARSCOUNT=20,L*0.98,'△'),COLORWHITE,LINETHICK2DRAWTEXT(CURRBARSCO......
  • 2022前端高频react面试题集锦
    Redux原理及工作流程(1)原理Redux源码主要分为以下几个模块文件compose.js提供从右到左进行函数式编程createStore.js提供作为生成唯一store的函数combineReducers.......
  • 01-html&CSS
    常用标签介绍  font<body><!--字体标签需求1:在网页上显示我是字体标签,并修改字体为宋体,颜色为红色。font标签是字体标签,它可以用来修改文本的字体,颜......