常連

注目の的

回答者

ベストアンサー

拍手喝采

自己紹介

### 前提

　以下のコードにおいて、hr要素はフレックスアイテムやグリッドアイテムになりますが、br要素はそのようにならずテキストと一体として扱われているように思います。

0. これは、どのような仕様によるものでしょうか。推測や個人的見解でかまいませんので、教えて下さい。
0. Chrome と Firefox で同じ動作でしたが、これは仕様に沿ったUAであればこの動作が保証されているでしょうか。推測や個人的見解でかまいませんので、教えて下さい。
0. br要素以外に、このようなふるまいをする要素はありますか？

　なお、回避方法などについてお伺いをしているわけではないです。

### 該当のソースコード

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .flex {
      display: flex;
    }

    .grid {
      display: grid;
      grid: auto-flow / repeat(5, auto);
    }
  </style>
</head>

<body>
  <div class="flex">
    text
    <br>
    text
    <hr>
    text
  </div>
  <div class="grid">
    text
    <br>
    text
    <hr>
    text
  </div>
</body>

</html>
```

### 発生している問題・エラーメッセージ

 Chrome Devtools の Layout タブで overlay を表示したスクリーンショット
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-02/090f8cb8-7f30-4782-afce-b492e0e05122.png)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-02/d266a6a8-4ee3-49cf-a85b-bf9a45393673.png)


 Firefox の開発者ツールのレイアウトタブでフレックスアイテムのリストを表示したスクリーンショット
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-02/446687bf-2c96-46bd-8245-b87cce3e0314.png)

### 試したこと

この仕様は見ました。

> br { display-outside: newline; } /* this also has bidi implications */
> [15.3.4 Phrasing content | HTML Standard](https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3)

[4. Flex Items | CSS Flexible Box Layout Module Level 1](https://www.w3.org/TR/css-flexbox-1/#flex-items)

[6. Grid Items | CSS Grid Layout Module Level 2](https://drafts.csswg.org/css-grid/#grid-items)




br要素だけがフレックスアイテムやグリッドアイテムにならない

お世話になります、他人が作ったJavaScriptを見ていると
唐突に謎の書き方が出てきますが言語化が難しく調べるのが難しいものがあります

その一つが以下のソースなのですが

```ここに言語を入力
TextEditor.prototype.createElements = function () {
  this.TEXTAREA = document.createElement('TEXTAREA');
  this.TEXTAREA.tabIndex = -1;
  (0, _element.addClass)(this.TEXTAREA, 'handsontableInput');
  this.textareaStyle = this.TEXTAREA.style;
  this.textareaStyle.width = 0;
  this.textareaStyle.height = 0;
  this.TEXTAREA_PARENT = document.createElement('DIV');
  (0, _element.addClass)(this.TEXTAREA_PARENT, 'handsontableInputHolder');
  this.textareaParentStyle = this.TEXTAREA_PARENT.style;
  this.textareaParentStyle.zIndex = '-1';
  this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
  this.instance.rootElement.appendChild(this.TEXTAREA_PARENT);
};
```

お行儀のよい右辺左辺の読みやすいコードだなと思っていたら、、
この途中ででてくる二つの括弧はなにを意味しているのでしょうか


```ここに言語を入力
(0, _element.addClass)(this.TEXTAREA, 'handsontableInput');
```

代入なの？関数なの？まったく意味が分かりません
関係ないですが、JavaScriptってトリッキーな書き方がかっこいいみたいな風潮ないですかね？

すみません、それは置いといて
それは即時関数だよとか可変変数だよとか調べるためのヒントだけでも構いません
ベテランの方お教えいただけますと幸いです

JavaScriptを読んでいてたまに出てくる唐突な二つの括弧の意味

### 前提・実現したいこと

Objective-cでUIWebViewを使用しPHPからPDFを表示しております。
iPadOS13になってからPDFがテキストエディタで開いた表な状態で描画されるようになってしまいました。
iOS12のiPAdでは正常にPDFが描画されます。
iPadOS１３でも正常に表示させるにはどうすればよいでしょうか？
iOS開発ほぼ初心者になります。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

iPadOS13よりUIWebViewでPDFが表示されなくなりました

### 発生している問題

前任者から引き継いだウェブサイトが Chrome のみの対応で、これを Edge にも対応させようとしていますが、未解決の問題があり、質問させていただきます。

CSS のカスタムプロパティに `url()` を相対パスで指定しましたが、これを別の階層から呼び出したときに取得される絶対パスがブラウザによって異なるため困っています。

具体的には、以下のように `./index.html` のインライン CSS でカスタムプロパティ `--icon` を設定し、それを外部 CSS `./css/test.css` で呼び出すという流れになっています。Chrome では `./css/icon.png` が参照されますが、Edge (EdgeHTML) では `./icon.png` が呼ばれてしまいます。


```html
<link rel=”stylesheet” type=”text/css” href=”css/test.css”>
...
<p style="--icon: url(icon.png);">見出しです</h1>
...
```

```css
p {
  background-image: var(--icon);
}
```

CSS の `url()` は相対パスを指定すると当該 CSS をベースURLとして使いますから、Chrome のように `./css/test.css` と同じ階層にある `./css/icon.png` を取ってきてほしいのですが、Edge では `./index.html` をベースURLとして使っているようです。

カスタムプロパティを使わずに CSS を以下のように書けば、Edge でも `./css/icon.png` を探してくれます。Edge ではカスタムプロパティ設定の段階で計算が行われ絶対パスに解決されてしまうのか？　あるいは謎の最適化が悪さをしているのか？　よくわかりません。

```css
p {
  background-image: url(icon.png);
}
```

どちらの挙動が仕様書に則ったものなのか調べてみましたが、`url()` の相対パスが絶対化されるタイミング（指定値→算出値？）とカスタムプロパティを `var()` で呼ぶタイミングがどう関連しているのかわかりませんでした。

### 知りたいこと
Chrome (Chromium) の挙動と Edge (EdgeHTML) の挙動のどちらが仕様書に則っているのか、またどうすれば２つのブラウザで同じ場所を参照できるのか、ご教授いただければ幸いです。

CSS で url() 相対パスの解決がうまくいかない

TypeScript + React（JSX）のコードを書いていたのですが、うっかり拡張子が`.ts`のままJSXを書いてしまってトラブルとなることがありました。もちろん拡張子を`.tsx`とすれば解決はするのですが、JSXの有無に関わらず、最初から全ファイルを`.tsx`としてしまって不都合なことはありますでしょうか。

全ファイルを`.tsx`で作った場合、「`.ts`はMPEG-2 TSと拡張子が衝突するけど`.tsx`はそうならない」「あとからJSXが必要になってもそのまま書け、ファイル名変更が不要」などのメリットが見込めます。

下に書いたように「`<type>`形式でのキャストができない」ということは承知ですが、それ以外に「`.tsx`ファイルだとこんな不都合がある」ということがありましたら教えていただければと思います。

### 調べたこと

* [Allow JSX without using `.tsx` extension](https://github.com/microsoft/TypeScript/issues/30503) - 逆に、`.ts`でもJSXを書けるようにしてはどうかという提案（クローズされています）
* キャストの記法として`value as type`と`<type>value`の2通りがあって、後者は`.tsx`ファイルには書けないこと

### 補足情報（FW/ツールのバージョンなど）

* TypeScript 3.7.5
* React 16.12
* Webpack 4.41.6
* Webpackへの読み込みには`ts-loader`を使用（型チェックは`fork-ts-checker-webpack-plugin`に投げている）
* エディタはVisual Studio Codeを使用

Reactを使うプロジェクト内のTypeScriptをすべて.tsxで作るデメリットについて

運営側への質問です。
コードブロックで使える言語の一覧はどこかにありますか？ちょっと見当たらないようです。
さっき、VBA を書こうとして困りました。vbnetで代用ですかね。
Windowsのバッチスクリプトは試行錯誤で見つけましたが、BATでもCMDでもなく何故かDOS。懐かしい単語ですが、DOSバッチと、現在のWindowsのバッチは別物です。CMDが望ましいでしょう。

#追記: 2018-08-08
現時点では↓のようです。
```plain
1c:"1C"
abnf
accesslog
actionscript:"ActionScript", as
ada
apache:"Apache", apacheconf
applescript:"AppleScript", osascript
arduino:"Arduino"
armasm, arm
asciidoc:"AsciiDoc", adoc
aspectj
autohotkey:"AutoHotkey"
autoit
avrasm:"AVR Assembler"
awk
axapta:"Axapta"
bash:"Bash", sh, zsh
basic
bnf
brainfuck:"Brainfuck", bf
cal
capnproto, capnp
ceylon
clean, clean, icl, dcl
clojure-repl
clojure:"Clojure", clj
cmake:"CMake", cmake.in
coffeescript:"CoffeeScript", coffee, cson, iced
coq
cos, cos, cls
cpp:"C++", c:"C", cc, h, c++:"C++", h++, hpp
crmsh, crm, pcmk
crystal, cr
cs, csharp:"C#", c#:"C#"
csp
css:"CSS"
d:"D"
dart
delphi:"Delphi", dpr, dfm, pas, pascal, freepascal, lazarus, lpr, lfm
diff:"Diff", patch
django:"Django", jinja
dns, bind, zone
dockerfile, docker
dos:"DOS.bat", bat, cmd
dsconfig
dts
dust, dst
ebnf
elixir:"Elixir"
elm
erb
erlang-repl:"Erlang REPL"
erlang:"Erlang", erl
excel, xlsx, xls
fix:"FIX"
flix
fortran, f90, f95
fsharp:"F#", fs, f#:"F#"
gams, gms
gauss, gss
gcode
gherkin:"Gherkin", feature
glsl:"GLSL"
go:"Go", golang
golo
gradle:"Gradle"
groovy
haml:"Haml"
handlebars:"Handlebars", hbs, html.hbs, html.handlebars
haskell:"Haskell", hs
haxe:"Haxe", hx
hsp
htmlbars
http:"HTTP", https
hy, hylang
inform7, i7
ini:"Ini", toml
irpf90
java:"Java", jsp
javascript:"JavaScript", js:"JavaScript", jsx
json:"JSON"
julia
kotlin
lasso:"Lasso", ls, lassoscript
ldif
leaf
less
lisp:"Lisp"
livecodeserver
livescript, ls
llvm
lsl
lua:"Lua"
makefile:"Makefile", mk, mak
markdown:"Markdown", md, mkdown, mkd
mathematica, mma
matlab:"Matlab"
maxima
mel:"MEL"
mercury, m, moo
mipsasm, mips
mizar:"Mizar"
mojolicious
monkey
moonscript, moon
n1ql
nginx:"Nginx", nginxconf
nimrod:"Nimrod", nim
nix:"Nix", nixos
nsis:"NSIS"
objectivec:"Objective C", mm, objc, obj-c
ocaml:"OCaml", ml
openscad
oxygene:"Oxygene"
parser3:"Parser3"
perl:"Perl", pl, pm
pf, pf.conf
php:"PHP", php3, php4, php5, php6
plain:"Plain text"
pony
powershell, ps
processing
profile
prolog
protobuf
puppet, pp
purebasic, pb, pbi
python:"Python", py, gyp
q
qml, qt
r:"R"
rib:"RenderMan RIB(RIB)"
roboconf, graph, instances
rsl:"RenderMan RSL(RSL)"
ruby:"Ruby", rb, gemspec, podspec, thor, irb
ruleslanguage
rust:"Rust", rs
scala:"Scala"
scheme
scilab:"Scilab", sci
scss:"SCSS"
smali, smali
smalltalk:"Smalltalk", st
sml, ml
sqf, sqf
sql:"SQL"
stan
stata, do, ado
step21, p21, step, stp
stylus, styl
subunit
swift:"Swift"
taggerscript
tap
tcl, tk
tex:"TeX"
text:"Plain text"
thrift:"Thrift"
tp
twig, craftcms
typescript:"TypeScript", ts
vala:"Vala"
vba:"VBA"
vbnet:"VB.NET", vb
vbscript-html
vbscript:"VBScript", vbs
verilog, v, sv, svh
vhdl:"VHDL"
vim:"Vim Script(Vim)"
x86asm:"Intel x86 Assembly"
xl, tao
xml:"XML", html:"HTML", xhtml, rss, atom, xjb, xsd, xsl, plist
xquery, xpath, xq
yaml, yml, YAML, yaml
zephir, zep
```