[[Tracy Durnell]] explains how she adds sidenotes in WordPress classic with just a bit of css, and using aside in html.
(v. [[Peter Rukavina p]]'s fav stream)
126 Matching Annotations
- Feb 2026
-
tracydurnell.com tracydurnell.com
- Nov 2023
-
-
✅ We can actually use a neat trick which basically consists in making a CSS grid with a single grid item. All we really have to do then, is taking our grid-template-rows and make it transition from 0fr to 1fr: this way, our grid item will transition from 0 to its "natural" height. It's THAT simple:
```css .accordion - body { display: grid; grid - template - rows: 0 fr; transition: 250 ms grid - template - rows ease; }
.accordion: hover.accordion - body { grid - template - rows: 1 fr; }
.accordion - body>div { overflow: hidden; } ```
-
-
css-tricks.com css-tricks.com
-
I’m sure you can imagine, the ability to shift an element around based on its regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.
-
-
gregorlove.com gregorlove.com
-
Tags
Annotators
URL
-
-
meyerweb.com meyerweb.com
-
I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline.
Aún cuando se trata de un reseteo completo de estilo CSS, proponentes de este método como es the Meyer's Reset recomiendan sobreescribir partes del reseteo con las preferencias personales del diseñador. Esto quiere decir que un reseteo no debe ser un reseteo en blanco, sino un reseteo hacia el estándar o base que el diseñador prefiera.
Tags
Annotators
URL
-
-
pencilandpaper.io pencilandpaper.io
-
Hay una serie de buenas prácticas en la fabricación de tablas que permiten una interacción más eficiente entre el usuario y la data que se busca comunicar. Una buena experiencia entre el usuario y las tablas dentro de una página web dependen en suma del diseño establecido. La fabricación de buenas tablas en la web solo requieren de conocimientos de HTML y CSS.
-
-
alan.norbauer.com alan.norbauer.com
Tags
Annotators
URL
-
- Aug 2023
-
Tags
Annotators
URL
-
-
web-platform-tests.org web-platform-tests.org
Tags
Annotators
URL
-
-
cheatsheetseries.owasp.org cheatsheetseries.owasp.org
-
-
```html
<body style="visibility: hidden;"> <script>0</script> </body> <noscript> <style>body { visibility: visible; }</style> </noscript>```
-
- Jul 2023
-
gist.github.com gist.github.com
-
stackoverflow.com stackoverflow.com
-
developer.chrome.com developer.chrome.com
-
firefox-source-docs.mozilla.org firefox-source-docs.mozilla.org
- Jun 2023
-
css-tricks.com css-tricks.com
- May 2023
-
developer.mozilla.org developer.mozilla.org
-
developer.mozilla.org developer.mozilla.org
- Apr 2023
-
x.st x.st
Tags
Annotators
URL
-
- Mar 2023
-
www.mattstobbs.com www.mattstobbs.com
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
developer.mozilla.org developer.mozilla.org
-
CSS-generated content is not included in the DOM. Because of this, it will not be represented in the accessibility tree and certain assistive technology/browser combinations will not announce it. If the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document.
-
-
css-tricks.com css-tricks.com
Tags
Annotators
URL
-
-
Tags
Annotators
URL
-
-
css-tricks.com css-tricks.com
-
developer.mozilla.org developer.mozilla.org
- Feb 2023
-
patrickbrosset.medium.com patrickbrosset.medium.com
- Jan 2023
-
iamkate.com iamkate.com
Tags
Annotators
URL
-
-
github.com github.com
-
https://github.com/CondeNast/atjson
They're using annotations in this context more like CSS, but instead of adding the markup into the content as is done in HTML and processing it, they've physically separated the text and the markup entirely and are using location within the text to indicate where the formatting should take place.
-
- Dec 2022
-
blog.logrocket.com blog.logrocket.com
Tags
Annotators
URL
-
-
www.zhihu.com www.zhihu.com
-
怎么进一步提高 HTML 和 CSS 的能力？
-
-
www.zhihu.com www.zhihu.com
-
如何解决外边距叠加的问题？
-
-
www.itcodar.com www.itcodar.com
-
fastwebstart.com fastwebstart.com
- Nov 2022
-
docs.emmet.io docs.emmet.io
-
-
stackoverflow.com stackoverflow.com
-
blog.logrocket.com blog.logrocket.com
Tags
Annotators
URL
-
- Aug 2022
-
nikitahl.com nikitahl.com
-
```html
<div class="select-container" data-content=""> <select class="select" id="words"> <option value="lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</option> <option value="lorem">Lorem</option> <option value="ipsum">Ipsum</option> <option value="dolor">Dolor</option> <option value="sit">Sit</option> <option value="amet">Amet</option> </select> </div>css .select { color: transparent; appearance: none; padding: 5px; background: transparent url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat calc(~"100% - 5px") 7px; background-size: 10px 10px; }.select-container { position: relative; display: inline-block; }
.select-container::before { content: attr(data-content); pointer-events: none; position: absolute; top: 0; right: 10px; bottom: 0; left: 0; padding: 7px; font: 11px Arial, sans-serif; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-transform: capitalize; }
js const selectContainer = document.querySelector(".select-container"); const select = selectContainer.querySelector(".select");select.value = "lorem ipsum dolor sit amet"; selectContainer.dataset.content = select.value;
function handleChange(e) { selectContainer.dataset.content = e.currentTarget.value; }
select.addEventListener("change", handleChange); ```
-
- Jul 2022
-
www.phpied.com www.phpied.com
-
And immediately after it, the 2 CSS downloads begin. What we want to do is move the CSS downloads to the left, so all rendering starts (and finishes!) sooner. So all you do it take the URLs of these two files and add them to .htaccess with H2PushResource in front. For me that means the URL to my custom theme's CSS /wp-content/themes/phpied2/style.css as well as some WordPress CSS stuff. While I was there I also added a JavaScript file which is loaded later. Why now start early? So the end result is:
WordPress tip to start loading some CSS and JS files earlier.
Sample code to add to
.htaccess:H2PushResource /wp-content/themes/phpied2/style.css H2PushResource /wp-includes/css/dist/block-library/style.min.css?ver=5.4.1 H2PushResource /wp-includes/js/wp-emoji-release.min.js?ver=5.4.1
-
-
educational-innovation.sydney.edu.au educational-innovation.sydney.edu.au
-
An article discussing the creation of custom HTML and CSS for blackboard
-
- Jun 2022
-
css-tricks.com css-tricks.com
Tags
Annotators
URL
-
-
blogs.perficient.com blogs.perficient.com
-
Tags
Annotators
URL
-
-
css-tricks.com css-tricks.com
- May 2022
-
web.simmons.edu web.simmons.edu
-
- Apr 2022
-
css-tricks.com css-tricks.com
Tags
Annotators
URL
-
- Mar 2022
-
codepen.io codepen.io
-
-
headlessui.dev headlessui.dev
Tags
Annotators
URL
-
-
tailblocks.cc tailblocks.cc
-
-
www.youtube.com www.youtube.com
-
-
flowbite.com flowbite.com
-
play.tailwindcss.com play.tailwindcss.com
Tags
Annotators
URL
-
-
css-tricks.com css-tricks.com
Tags
Annotators
URL
-
-
jsfiddle.net jsfiddle.net
-
-
lexoral.com lexoral.com
Tags
Annotators
URL
-
- Dec 2021
-
app.htmlplanetforkids.com app.htmlplanetforkids.com
- Nov 2021
-
www.interviewbit.com www.interviewbit.com
-
Front end framework is a combination of two separate words, Front end + Framework. Front end is the visual site of any web application or a website, it is that part of the website with which a user interacts, note that backend is that part that involves API calls, database connectivity, authentication and so on, and a framework in literal sense means an essential supporting structure of an object, the object is a website in this case.
What's Front End Frameworks? Here's the complete guide to understand the best front end frameworks.
-
- Sep 2021
-
www.freecodecamp.org www.freecodecamp.org
- May 2021
-
stackoverflow.com stackoverflow.com
-
Negative margins are in many cases equivalent to position:relative; with negative position, e.g. position:relative; top:-100px, as in Guffa's answer.
-
-
stackoverflow.com stackoverflow.com
-
Negative margins get removed by Gmail and others. So, no negative margins.
-
-
stackoverflow.com stackoverflow.com
-
You can't use negative margin in html email. To mimic this, there are 2 ways to do it, the nested tables way and the more complex rowspan way:
-
gmail and other mail services are ignoring the negative margin.
-
-
stackoverflow.com stackoverflow.com
-
Negative values are mostly unsupported in html email. So is CSS position. For webmail at least, this is so that your email doesn't render outside of the desired window. Imagine Gmail with your CSS or email affecting the interface - they've limited the CSS you can use specifically to prevent this.
-
-
hashnode.com hashnode.com
-
No, most css doesn't work in emails, stick to tables and images.
-
Honestly, even without flexbox support, most of the layout problems would be solved with simple-basic CSS3 support that is standard in all clients.
layout problems don't need ; all we need is simple-basic CSS3 support that is standard in all clients.
-
-
hashnode.com hashnode.com
-
But more so, external style cannot be applied to a subsection of a web page unless they force it into an iframe, which has all sorts of issues of it's own which is why external CSS is usually ignored. Inline CSS is often stripped by the tag strippers who don't want you turning things on or off... and media queries shouldn't even play into it since the layout should be controlled by the page it's being shown inside (for webmail) or the client itself, NOT your mail.
-
-
www.hteumeuleu.com www.hteumeuleu.com
-
As a conclusion, I’d say that Flexbox in an email unfortunately causes more troubles than it helps solving.
-
-
-
-
content.myemma.com content.myemma.com
-
Embedded CSS: This style is becoming more popular with the rise of mobile and responsive emails. Embedded CSS codes are determined in one place of an email, generally in the <head> section as a <style>. Some email servers still strip the information out of this section, which can cause display problems.
-
-
-
stackoverflow.com stackoverflow.com
-
I would try designing your mail-template as "normal" as possible. Tables help a lot for example (yuck).
-
-
css-tricks.com css-tricks.com
- Apr 2021
-
blog.steren.fr blog.steren.fr
-
-
The best tool is no tool, the best build step is no build step, the best update is no update. HTML gives us all that, and more.
Truth!
-
-
stackoverflow.com stackoverflow.com
-
It should be defined inline. If you are using the img tag, that image should have semantic value to the content, which is why the alt attribute is required for validation. If the image is to be part of the layout or template, you should use a tag other than the img tag and assign the image as a CSS background to the element. In this case, the image has no semantic meaning and therefore doesn't require the alt attribute. I'm fairly certain that most screen readers would not even know that a CSS image exists.
I believed this when I first read it, but changed my mind when I read this good rebuttal: https://hyp.is/f1ndKJ5eEeu_IBtubiLybA/stackoverflow.com/questions/640190/image-width-height-as-an-attribute-or-in-css
-
What's the "correct" semantic way to specify image height and width? In CSS... width:15px; or inline... <img width="15" ?
-
- Mar 2021
-
-
Last week, I shared how to check if an input is empty with CSS. Today, let’s talk about the same thing, but with JavaScript.
-
-
stackoverflow.com stackoverflow.com
-
The :empty selector refers only to child nodes, not input values. [value=""] does work; but only for the initial state. This is because a node's value attribute (that CSS sees), is not the same as the node's value property (Changed by the user or DOM javascript, and submitted as form data).
-
Generally, CSS selectors refer to markup or, in some cases, to element properties as set with scripting (client-side JavaScript), rather than user actions. For example, :empty matches element with empty content in markup; all input elements are unavoidably empty in this sense. The selector [value=""] tests whether the element has the value attribute in markup and has the empty string as its value. And :checked and :indeterminate are similar things. They are not affected by actual user input.
-
-
css-tricks.com css-tricks.com
-
You can do and impressive amount of form validation with just HTML attributes. You can make the user experience pretty clean and clear with CSS selectors.
-
-
girliemac.com girliemac.com
-
the client form validation is the one I like a lot, because, for example, by adding required attribute to an input, I don’t need to write any additional JavaScript to warn a user, when the user submits a form without filling out the required fields
-
- Feb 2021
-
stackoverflow.com stackoverflow.com
- Jan 2021
-
developers.google.com developers.google.com
Tags
Annotators
URL
-
-
stackoverflow.com stackoverflow.com
-
-
Use inline styles for everything.
-
-
www.emailonacid.com www.emailonacid.com
-
css-workshop.com css-workshop.com
-
How to wrap long word (text without spaces) in html table’s cell? This is very, very easy! We must add only a CSS proprty to table cell “td” tag – “word-break: break-all;” then all column’s widths become as intended.
-
-
www.geeksforgeeks.org www.geeksforgeeks.org
-
It is also very likely that the contents of the table might change the structure or dimensions of the table. For example, long words residing in the table cells can cause the cell width to increases. If you fix that problem, it might happen that the long words cross the cell boundaries.
-
-
developer.mozilla.org developer.mozilla.org
-
<q>Dies ist ein deutsches Zitat</q>
-
- Jun 2020
-
www.educative.io www.educative.io
-
The CSS above will ONLY select the h1 and h2 within the div. The other h1 and h2 within the p tag will be left unstyled.
父级选择器用空格
-
- Apr 2020
-
www.w3schools.com www.w3schools.com
Tags
Annotators
URL
-
- Mar 2020
-
www.youtube.com www.youtube.com
-
There's a really cool layout rendering video at 17:00.
-
-
-
paramaggarwal.substack.com paramaggarwal.substack.com
-
We were not satisfied with the basic capabilities like bold and italics so we built CSS. Now, we wanted to modify some parts of the HTML/CSS in response to things like clicking things, so we implemented a scripting language to quickly specify such relations and have then run within the browser itself instead of a round trip to the server.
Birth of CSS - advanced styling
(history of websites)
-
-
stackoverflow.com stackoverflow.com
-
ol { counter-reset:item; } li { display:block; } li:before { content:counter(item) '. '; counter-increment:item; }
-
- Jan 2020
- Nov 2019
-
developer.mozilla.org developer.mozilla.org
- Sep 2019
-
-
stackoverflow.com stackoverflow.com
-
stackoverflow.com stackoverflow.com
-
stackoverflow.com stackoverflow.com
-
developer.mozilla.org developer.mozilla.org:target1
-
stackoverflow.com stackoverflow.com
- Oct 2017
-
www.coursera.org www.coursera.org
-
using the style tag and writing the CSS inside it or by using the link tag to link to a style sheet. Either of these tags go in the head portion of your HTML.
How to include CSS in a page/site. Goes in the Head
- Use <style> tag or</li> <li>Use <link> tag that points to a style sheet.</li> </ol> </style>
-
One of those themes was reusability. You could describe a style once in CSS and reuse it across multiple elements or even multiple web pages. 0:31Another of those themes was maintainability. Being able to efficiently change your web page in response to changing design requirements.
Why CSS
- Reusability
- Maintainability
-
- Jan 2017
-
resilientwebdesign.com resilientwebdesign.com
-
Anyone using that older browser should have access to the same content as someone using the latest and greatest web browser. But that doesn’t mean they should get the same experience. As Brad Frost puts it: There is a difference between support and optimization. Support every browser ...but optimise for none.
This is why HTML (content) must be separated from CSS (layout) and javascript (interactivity). Content is the core functionality. CSS are displayed through progessive enhancement.
Tags
Annotators
URL
-
