[Falkor]

Originally Posted by JSWolf

The problem is that when you vh or % (ie, margin, height, etc) whichever is second in the CSS is what's used. So if the reading software doesn't do vh, and that's second, it won't do anything. Neither will do anything.

That's not how CSS works. It's a nasty bug in RMSDK. CSS error handling is designed to allow for fallback.

Originally Posted by W3C

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support.

Originally Posted by graycyn

Now, you do have to play about with it. For instance, if you add any padding, you have to consider that if a device honors first-letter but NOT initial-letter, you could get an odd look if you go crazy with too much. A tiny dab might be OK. I've been playing with adding a trace for the letter "I", because it tends to look a bit cramped otherwise.

You may apply that style only to readers that support initial-letter, so you can add as much padding or margin as you need

@supports (initial-letter: 2;) {
  p.chapter-lead::first-letter {
    initial-letter: 2;
    -webkit-initial-letter: 2;
}
}

Originally Posted by JSWolf

You have to be careful. If ADE 2.0.1 or 3.x thinks your code is a mistake, the entire CSS will be ignored.

Another ridiculous bug in their error handling. I haven't ever managed to make it ignore the entire CSS, though. @supports has never been a problem for me.

Originally Posted by JSWolf

What would happen if you had first-letter and a span for a program that supports both? This is a good reason to forgo drop caps if you need ePub2 compatibility.

You have to undo the span’s styling for readers that support initial-letter. This works fine for me:

span.dropcap-epub2 {
  font-size:580%;
  float:left;
  margin: -0.1em 0.1em -0.1em 0;
  vertical-align: top;
  line-height: 1 !important;
}

@supports (initial-letter:2) or (-webkit-initial-letter:2) {
  span.dropcap-epub2 {
    font-size:revert;
    float:revert;
    margin: revert;
    vertical-align: revert;
    line-height: revert;
    }
  
  h2 + p::first-letter{
    initial-letter: 2;
    -webkit-initial-letter: 2;
    margin-right: 0.3em;
    }  
}