search

elad2412 / the-new-css-reset

The New Simple and Lighter CSS Reset
https://elad2412.github.io/the-new-css-reset/
MIT License
2.26k stars 229 forks source link

Is the fix for :where([contenteditable]) -webkit-line-break: after-white-space intended? #30

Closed johndeboyd closed 2 years ago

johndeboyd commented 2 years ago

First and foremost, I'm a new web developer. I have a history of using HTML and CSS, from back in the 90s, but have never worked as a professional in the field, and therefore have little experience to speak of. I'm in a coding bootcamp right now, and recently found your CSS reset, and am playing around with it in my projects for the bootcamp. I say all of that to preface that my issue here could be misguided. Enough of that.

Is the following rule valid CSS? I'm specifically calling out the -webkit-line-break declaration. I've looked through the MDN for both line-break and white-space properties, and do not see any mentions of the after-white-space value. VS Code is also showing this declaration as a problem with the code. It's almost like this is a hack to use the :after pseudo-element, but even then, the MDN isn't showing a white-space (or after-white-space) value for the line-break property.

:where([contenteditable]) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
}

Thank you for taking a look at this, and if I am misguided, I welcome any feedback that could help me on my journey to learn to code. Have a good day.

elad2412 commented 2 years ago

This is part of the default of Chrome. You can do inspect element and see in this example under the user-agent-stylesheet:

https://codepen.io/elad2412/pen/gOxQdPy/2fd3b93abb08c62194c56c32dac5697e

ifohancroft commented 1 year ago

Just wanted to add some clarification, to hopefully help @johndeboyd on their journey:

Browsers use the so called browser engines (or rendering engine/layout engine/HTML layout engine) to render code to a website. Some browsers use different engines from one another. For example Firefox and Chrome use different engines. Some engines, have their own specific CSS properties (with a prefix), like with the -webkit-line-break. It's specific to Chrome's rendering engine, the prefix being the -webkit part. Which is why you don't find reference to it in Mozilla's Developer Notes website.