366 Matching Annotations
  1. Last 7 days
    1. 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.
    1. No, most css doesn't work in emails, stick to tables and images.
    2. 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.

    1. 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.
    1. Use this tool to do to convert internal and external style into inline for you: http://inlinestyler.torchboxapps.com/styler/
  2. Apr 2021
    1. 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

    2. What's the "correct" semantic way to specify image height and width? In CSS... width:15px; or inline... <img width="15" ?
    1. I LOVE the hover effects for the book covers on this site which is also a great example of someone collecting highlights/annotations of the books they read and hosting them in public on their personal website.

      Melanie has written about the CSS part of the hover effect here: https://melanie-richards.com/blog/highlights-minisite/ and like all awesome things, she's got the site open at https://github.com/melanierichards/highlights. I may have to do some serious digging for figuring out how she's creating the .svg images for the covers though.

    1. This way the text will wrap above the shape even though the div extends to the top.
    2. shape-outside: inset(100px 100px 100px 100px 10px);
    3. It might be better to think of it this way: with the shape-outside property we’re changing the relationship of other elements around an element, not the geometry of the element itself.
  3. Mar 2021
    1. 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.
    1. 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).
    2. You can use the :placeholder-shown pseudo class. Technically a placeholder is required, but you can use a space instead.
    3. 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.
    4. The selector [value=""] tests whether the element has the value attribute in markup and has the empty string as its value.
    1. it does require some CSS trickery to get everything just right
    2. You can’t use @supports for selectors, only property/values (e.g. @supports (display: flex))

      first sighting CSS: @supports

    3. 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.
    1. 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
    2. There are numerous user interface state pseudo-classes. You’ve probably already known :hover, :active etc. According to this W3C Candidate Doc, there are additional pseudo-classes defined, such as :valid, invalid, in-range, out-of-range, required, optional, read-only and read-write.
  4. Feb 2021
    1. The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling: .element { width: 20px; height: 20px; transform: scale(20); } Even with a declared height and width, this element will now be scaled to twenty times its original size:

      For css codes, we can use transform: scale(20).

    1. 100vw is 100% of the viewport width not accounting for scrollbars (unless the root element has anything other than overflow: auto set, but auto is the default value). Thus, when the page content overflows the viewport vertically, the browser renders the vertical scroll bar, which reduces the visible viewport area by a few pixels. But the 100vw value doesn't update to account for this, so the selected div retains the same width as before the vertical scrollbar appeared. This results in the horizontal scroll bar rendering.
    1. Now, however, you set width:100vw and that is going to be (in this case) 100% wide (viewport wide) + the vertical scrollbar width. That’s too wide. That induces the HORIZONTAL scrollbar.
    1. You use grid-area, so the place for the side nav is allocated at start. If you hide (or even delete) the side nav, that won't change anything about this. You have to do a little trick: Set the width for the first column to 0 and change the grid-gap because otherwise you will have a (not needed) gap at the left.
    1. Adding backgrounds and borders does feel like a missing feature of the CSS Grid specification and one which the Working Group have discussed along with many members of the community (the discussion thread is on GitHub).
    2. With Grid and generated content, we can add a line either side of our heading without adding any additional markup. The line will grow and shrink according to available space
    3. The key phrase here is “children of a grid container.” The specification defines the creation of a grid on the parent element, which child items can be positioned into. It doesn’t define any styling of that grid, not even going as far as to implement something like the column-rule property we have in Multi-column Layout. We style the child items, and not the grid itself, which leaves us needing to have an element of some sort to apply that style to.
    1. Ensure that there can only be four items per row: grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); grid-gap: 10px; With 20% minimum width per item, and a grid gap (of any length), there can never be more than four items per row.
    1. Because of the way the CSS “or” operator works, I wouldn’t be able to mix the retina conditions with other expressions since a (b or c) would be compiled into (a or b) c and not a b or a c.
    1. auto (i.e. minmax(auto, max-content))
    2. Note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.
    3. Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.
    1. If no end line value is declared, the item will span 1 track by default.
    2. Notice that you’re not naming lines with this syntax, just areas.
    3. The syntax itself provides a visualization of the structure of the grid.

      What is this an example of? self-referencing? self-presentation? duality?

    4. justify-content Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container.
    1. When you generate before- and after-content pseudo-elements, Grid treats them as actual elements and makes them grid items.
    2. Since CSS doesn’t (yet) offer a way to style grid cells, areas, or tracks directly, we have to stretch elements over the parts we want to style independently from the elements that contain content.
    3. div:nth-of-type(3n+1) { grid-column: 1; } div:nth-of-type(3n+2) { grid-column: 2; } div:nth-of-type(3n+3) { grid-column: 3; } div:nth-of-type(-n+3) { grid-row: 1; }
    4. The 1 / -1 means “go from the first grid line to the last grid line of the explicit grid”, regardless of how many grid lines there might be. It’s a handy pattern to use in any situation where you have a grid item meant to stretch from edge to edge of a grid.
    5. They likely won’t have any content, making them a sort of structural filler to spackle over the gaps in Grid’s capabilities.
    6. Just like in flexbox, this will move the displayed grid items out of source order, placing them after the grid items that don’t have explicit order values.
    7. #ttt > * { border: 1px solid black; border-width: 0 1px 1px 0; display: flex; /* flex styling to center content in divs */ align-items: center; justify-content: center; } #ttt > *:nth-of-type(3n) { border-right-width: 0; } #ttt > *:nth-of-type(n+7) { border-bottom-width: 0; }
    1. This nav bar by Chris Coyier is a great example of something that makes more sense as a flexbox than grid.
    2. Flexbox and grid play well together, and are a huge step forward from the float & table hacks they replace.
    3. Flexbox's strength is in its content-driven model. It doesn't need to know the content up-front. You can distribute items based on their content, allow boxes to wrap which is really handy for responsive design, you can even control the distribution of negative space separately to positive space.
    4. Flexbox: content dictates layout
    5. Grid: container dictates layout
    1. .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; }
    1. the difference is exactly like block and inline-block ... if you use inline-grid with sibling elements they will be placed in the same line unlike grid ... so here you change to grid also since each element is inside a grid area alone
    1. Sass

      Define variables, such as colors (e.g. $primary: #337ab7) in Sass (styles.scss) then compile to css for web.

      R library "bootstraplib" built on foundation of "sass".

      Use "run_with_themer()" to get a live preview GUI for customizing bootstrap theme.

      Also, use "shinyOptions(plot.autocolors=TRUE)" at top of app to get plot outputs that respect Dark Mode.

  5. Jan 2021
    1. Bordering an element with a single repeating image is something that seems like it should be easy with a property called border-image, but the process for actually doing that is somewhat counter-intuitive. Let’s say, for example, that you want to border an element with a repeating heart icon. You can’t do that with a image of a single heart. Instead, you have to make an image of a “frame” of hearts arranged as you’d like them to appear in the border, then slice that image. <img sizes="(min-width: 735px) 864px, 96vw" src='https://i2.wp.com/css-tricks.com/wp-content/uploads/2013/01/enlarged-border-image-slice.png' alt='' data-recalc-dims="1" />Eight hearts in a “frame” image, enlarged to show detail. The red lines indicate slices. If you think that sounds preposterous, you’re in good company. There was a lengthy discussion of the subject on Eric Myer’s blog a few years ago where many frontend development greats weighed in.
    1. Situation: you have a single line of text in a flex child element. You don’t want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. Flexbox is supposed to be helping make layout easier!
    1. I used it to create a full-bleed utility class: .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
    2. Use-case party I asked some CSS developers when they last used calc() so we could have a nice taste here for for how others use it in their day-to-day work.
    1. Great, I can use vw to scale text so it doesn't look puny on a desktop! Perfect... Oh. Huh, now the text is too small to read when viewed on a phone. Okay, well I can just use "max(x,y)" to make sure it doesn't get shrunk beyond a minimum size. Perfect... Oh. Hmm. Looks like "max" isn't supported properly by Chrome. Okay, well guess I'll just use "px" again.
    1. auto As a maximum, identical to max-content. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

      And I'm guessing that when you use auto as a value (not inside of a minmax), that it is equivalent to minmax(min-content, max-content)? Wish I could see that confirmed somewhere...

    1. CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
    1. 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. 
    1. fixed: With this value, the table’s layout ignores the content and instead uses the table’s width, any specified width of columns, and border and cell spacing values. The column values used are based on widths defined on columns or cells for the first row of the table
    1. 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.
    1. The only difference is that in this case “auto” will not work, but instead “height: 100%” is required.
    2. When you give an element a width of 100% in CSS, you’re basically saying “Make this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.” So, if you have a parent container that’s 400px wide, a child element given a width of 100% will also be 400px wide, and will still be subject to margins, paddings, and borders — on top of the 100% width setting.
    3. Blocks Don’t Need 100% Width When we understand the difference between block-level elements and inline elements, we’ll know that a block element (such as a <div>, <p>, or <ul>, to name a few) will, by default expand to fit the width of its containing, or parent, element (minus any margins it has or padding its parent has).
    4. But in most cases, I strongly recommend you use padding inside a box, rather than margins, to ensure you don’t have this problem.
    5. It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it’s simple — just add width: 100% in your CSS declaration for that element, and your problem is solved. Not so fast. It’s not quite that easy. I’m sure CSS developers of all skill levels have attempted something similar to what I’ve just described, with bizarre results ultimately leading to head scratching and shruggingly resorting to experimenting with absolute widths until we find just the right fit. This is just one of those things in CSS that seems easy to understand (and really, it should be), but it’s sometimes not — because of the way that percentages work in CSS.
    1. min-width: 0;

      Wouldn't expect the solution to "width grows too wide" to be to assign a (seemingly meaningless, since how could it be less than 0) a minimum width of 0.

      I would have expected to solve this by applying a max-width to the problem element or one of its ancestors.

    2. The explanation here is that the minimum size of an fr unit is auto. Grid then looks at the min-content size of the item. If the item has a size (you’ve given it a width) or has something in it with a size such as an image, the min-content size might be much bigger than the share of available space you think 1fr will give you. It’s easy to think of 1fr as being “one part of the space in the grid container” when it is really one part of the space left over. If there is space to grow then the tracks grow from that min-content size assigning space. Using minmax, as you have pointed out, is the best thing to do if you want to forcibly have equal width tracks, as that says “I want this track to have a min-content size of 0”, you could potentially in that situation end up with overflows as you lose the squishiness.